Vuetify应用栏过高-占用屏幕的一半

Question

当我v-app-bar的v-app容器内部没有一个空的应用程序时，应用程序栏将占据页面的一半。

<v-app>

  <v-app-bar color="deep-purple" dark >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

演示在Codepen

我试过为dense，，short＆添加选项，height但它们似乎没有任何影响。

文档中有大量带有此确切的应用栏标记的代码示例，因此，我试图找出出了什么问题。

Answer 1

您需要添加app属性，v-app-bar如下所示：

<v-app>

  <v-app-bar color="deep-purple" dark app >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

这里的关键是App组件中的所有子元素必须指示它们是否应该使用应用布局

从Vuetify>组件>应用程序>默认标记：

只要您应用该app属性，就可以将布局元素放置在任何地方。

从Vuetify>组件>应用栏> API：

app
将组件指定为应用程序布局的一部分。用于动态调整内容大小。使用此道具的组件应位于组件外部v-content才能正常运行。