Vuetify 3 NavBar组件占满视口高度问题求助

我的NavBar组件在子元素未占满空间时，仍占据整个视口高度，多余空白影响布局。其中v-app内的v-app-bar显示正常无额外占用，但HeroSection组件需要滚动到屏幕下方才能查看。

我已尝试为v-app添加:full-height="false"及自定义height:auto样式，问题仍未解决。我的假设：

• v-app-bar必须置于v-app内
• App.vue组件布局正确

App.vue #

<template>
  <NavBar />
  <HeroSection />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import NavBar from "./components/NavBar.vue";
import HeroSection from "./components/HeroSection.vue";

@Options({
  components: {
    NavBar,
    HeroSection,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss"></style>

NavBar.vue #

<!-- eslint-disable vue/valid-v-on -->
<template>
  <v-app :full-height="false" class="app-bar-container">
    <v-app-bar :elevation="2">
      <!-- eslint-disable-next-line vue/valid-v-on -->
      <v-app-bar-nav-icon @click="drawer = !drawer" id="hamburger-icon">
      </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item v-for="item in menuItems" :key="item.title" @click="">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  VAppBar,
  VNavigationDrawer,
  VList,
  VListItem,
  VListItemTitle,
} from "vuetify/components";

export default defineComponent({
  components: {
    VAppBar,
    VNavigationDrawer,
    VList,
    VListItem,
    VListItemTitle,
  },
  setup() {
    const drawer = ref(false);
    const menuItems = [
      { title: "Home" },
      { title: "About" },
      { title: "Individuals" },
      { title: "Corporate" },
      { title: "Blog" },
      { title: "Contact" },
    ];

    return {
      drawer,
      menuItems,
    };
  },
});
</script>

<style scoped lang="scss">
.app-bar-container {
  height: auto;
}
</style>

HeroSection.vue #

<template>
  <div class="hero-section"></div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  name: "HeroSection",
})
export default class HeroSection extends Vue {}
</script>
<style lang="scss">
.hero-section {
  background-image: url("../assets/landing_hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
}
</style>

核心问题分析 #

Vuetify的v-app组件默认带有min-height: 100vh样式，即便你设置了:full-height="false"和height:auto，这个默认最小高度依然会让它占据整个视口高度，直接把HeroSection挤到屏幕外。另外，你的布局结构违反了Vuetify的规范——整个应用应该只有一个根级v-app组件，而非在NavBar内部嵌套v-app。

调整步骤 #

1. 重构App.vue，设置根级v-app #

将NavBar和HeroSection都放入根v-app中，让Vuetify布局系统正确管理组件空间：

<template>
  <v-app>
    <NavBar />
    <HeroSection />
  </v-app>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import NavBar from "./components/NavBar.vue";
import HeroSection from "./components/HeroSection.vue";

@Options({
  components: {
    NavBar,
    HeroSection,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss"></style>

2. 修改NavBar.vue，移除内部v-app #

保留v-app-bar和v-navigation-drawer，并确保v-navigation-drawer的app属性存在（用于附着到根v-app）：

<!-- eslint-disable vue/valid-v-on -->
<template>
  <div class="navbar-container">
    <v-app-bar :elevation="2">
      <!-- eslint-disable-next-line vue/valid-v-on -->
      <v-app-bar-nav-icon @click="drawer = !drawer" id="hamburger-icon">
      </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item v-for="item in menuItems" :key="item.title" @click="">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  VAppBar,
  VNavigationDrawer,
  VList,
  VListItem,
  VListItemTitle,
} from "vuetify/components";

export default defineComponent({
  components: {
    VAppBar,
    VNavigationDrawer,
    VList,
    VListItem,
    VListItemTitle,
  },
  setup() {
    const drawer = ref(false);
    const menuItems = [
      { title: "Home" },
      { title: "About" },
      { title: "Individuals" },
      { title: "Corporate" },
      { title: "Blog" },
      { title: "Contact" },
    ];

    return {
      drawer,
      menuItems,
    };
  },
});
</script>

<style scoped lang="scss">
.navbar-container {
  // 无需额外设置高度，组件会自适应内容
}
</style>

3. 优化HeroSection高度（可选） #

原HeroSection的100vh高度会让页面总高度超过视口（加上NavBar的高度），可以改为min-height: calc(100vh - 64px)（64px是v-app-bar默认高度），让它刚好填满剩余空间：

<template>
  <div class="hero-section"></div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  name: "HeroSection",
})
export default class HeroSection extends Vue {}
</script>
<style lang="scss">
.hero-section {
  background-image: url("../assets/landing_hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: calc(100vh - 64px); // 减去app-bar高度
  width: 100%;
}
</style>

关键规范提醒 #

• Vuetify应用必须仅存在一个根级v-app，所有布局相关组件都要放在它内部。
• v-navigation-drawer的app属性会让它与根v-app关联，无需在子组件内嵌套v-app。
• 尽量避免给容器组件强制设置高度，让Vuetify布局系统自动处理空间分配。

内容的提问来源于stack exchange，提问作者angusgee