使用 v-app-bar 会导致 v-content 始终具有与 v-app-bar 高度相同的溢出

Question

所以我有这个由 Vuetify 制作的简单布局（顺便说一句，我很喜欢）：

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

但问题是它总是会导致 v-content 中的 64px 溢出（64px 是 v-app-bar 的高度）。 溢出是由“min-height:100vh;”引起的自动应用于以下元素：

如果我按照以下方式定义自己的自定义 css：

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

问题会消失。

另外请注意，Vuetify 会自动添加到 v-container (

) 的顶部填充 64px 并且 v-app-bar (

) 具有 position:fixed，因此一切正常。

但我希望 Vuetify 有一个“内置”解决方案。我已经阅读了我所知道的所有关于 app 道具的信息。当然，Vueitify 必须为此提供更好的解决方案，我的意思是我想使用道具 - 而不是自定义 CSS。

【问题讨论】：

• 你搞清楚了吗？您是否尝试过更新 Vuetify 版本？

Answer 1

这是你的需要吗？

<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>