Vuetify布局问题：Footer与Navigation Drawer显示异常求助

问题描述 #

使用Vuetify实现类似docus.dev/api/composables的布局时，遇到以下问题：

• Footer无法完全显示
• Navigation Drawer高度不足、边框被截断，仅滚动到页面底部时高度才恢复正常

当前代码 #

<template>
  <v-app>
    <Header />
    <v-footer border="t" absolute app>
      <v-row justify="center" no-gutters>
        <AppThemeToggle />
        <v-col class="primary lighten-2 py-4 text-center white--text" cols="12">
          <strong
            >Copyright {{ new Date().getFullYear() }} vuetify
            Corporation</strong
          >
        </v-col>
      </v-row>
    </v-footer>
    <v-navigation-drawer permanent width="300">
      <v-row justify="center">
        <v-expansion-panels :modelValue="panel" :multiple="true">
          <v-expansion-panel
            v-for="(item, i) in matchedNavObject.children"
            :key="i"
          >
            <v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>

            <v-expansion-panel-text
              v-for="(navItem, j) in item.children"
              :key="j"
            >
              <nuxt-link
                :to="`${baseUrl}${navItem._path}`"
                class="text-decoration-none"
                :class="{
                  active: `${navItem._path}` === route.path,
                }"
                >{{ navItem.title }}</nuxt-link
              >
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-row>
    </v-navigation-drawer>
    <v-main>
      <v-container>
        <slot />
        <NavigationLink />
      </v-container>
    </v-main>
  </v-app>
</template>
<style lang="scss">
.test {
}
</style>

解决步骤 #

1. 修复Footer显示异常 #

移除v-footer的absolute属性，保留app属性即可。absolute会让Footer脱离文档流导致内容被遮挡；app属性能让Footer自动适配v-app布局，固定在页面底部。

2. 修复Navigation Drawer高度问题 #

• 给v-navigation-drawer添加app属性，让它参与v-app的布局计算，确保高度铺满可用空间。
• 移除v-navigation-drawer内部的v-row，改用v-container直接包裹内容，避免不必要的嵌套干扰高度计算。
• 调整组件顺序：将v-navigation-drawer放在v-main之前，v-footer放在v-main之后，让Vuetify布局系统正确识别组件位置关系。

调整后的完整代码 #

<template>
  <v-app>
    <Header />
    <v-navigation-drawer permanent width="300" app>
      <v-container>
        <v-expansion-panels :modelValue="panel" :multiple="true">
          <v-expansion-panel
            v-for="(item, i) in matchedNavObject.children"
            :key="i"
          >
            <v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>

            <v-expansion-panel-text
              v-for="(navItem, j) in item.children"
              :key="j"
            >
              <nuxt-link
                :to="`${baseUrl}${navItem._path}`"
                class="text-decoration-none"
                :class="{
                  active: `${navItem._path}` === route.path,
                }"
                >{{ navItem.title }}</nuxt-link
              >
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-container>
    </v-navigation-drawer>
    <v-main>
      <v-container>
        <slot />
        <NavigationLink />
      </v-container>
    </v-main>
    <v-footer border="t" app>
      <v-row justify="center" no-gutters>
        <AppThemeToggle />
        <v-col class="primary lighten-2 py-4 text-center white--text" cols="12">
          <strong
            >Copyright {{ new Date().getFullYear() }} vuetify
            Corporation</strong
          >
        </v-col>
      </v-row>
    </v-footer>
  </v-app>
</template>
<style lang="scss">
.test {
}
</style>

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