Use of v-app-bar causes v-content to always have an overflow identical to the height of the v-app-bar

2
votes

So I'm having this simple layout made by Vuetify (which I love by the way):

<template>
  <v-app>
    <v-app-bar
      app
    >
    </v-app-bar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>

The problem though is that it will always result in on overflow of 64px in the v-content (the 64px is the height of the v-app-bar). The overflow is caused by the "min-height:100vh;" that is automatically applied to the following element:

<div class="v-application--wrap">

If I define my own custom css according to:

<style>
  div.v-application--wrap {
    min-height:calc(100vh - 64px) !important;
  }
</style>

the problem will go away.

Also note that Vuetify will automatically add to the v-container (<main class="v-container">) top padding of 64px and the v-app-bar (<header>) has position:fixed, so that is all in order.

But I expect Vuetify to have a "built-in" solution for this. I've read all about the app prop that I know of. Surely Vueitify must have a better solution for this, and by that I mean I want to use a prop - not custom CSS.

1
vuetify.js

1 Answers

0
votes

this is your need?

<v-app-bar app color="primary" dark style="height:64px"> or


<v-app-bar color="primary" dark style="height:64px">
<v-app-bar>

<v-content style="overflow:auto">
      <v-container>
        <router-view />
      </v-container>
</v-content>