Vuetify中v-row与v-col未占满子元素空间问题咨询

问题描述 #

我按照v-container > v-row > v-col > v-app-bar的层级布局，但v-row未拉伸至子元素高度，v-col甚至未占据任何空间。默认认为父元素会自适应子元素空间，查看v-col API文档也未找到原因，添加min-h-64类到v-row也无效。相关代码如下：

<template>
  <v-app>
    <v-container fluid>
      <v-row>
        <v-col class="d-flex">
          <v-app-bar class="bg-teal">
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-spacer></v-spacer>
            <v-tool-bar-title class="mx-auto"
              >Vuetify Dashboard</v-tool-bar-title
            >
            <v-spacer></v-spacer>
            <v-btn variant="elevated" class="mr-2" color="primary">Home</v-btn>
            <v-btn variant="elevated" class="mr-5" color="primary">About</v-btn>
          </v-app-bar>
        </v-col>
      </v-row>
      <v-row class="h-screen">
        <v-col class="d-flex align-center justify-center">
          <v-card width="400" class="mx-auto">
            <v-card-title class="my-5">
              <h1 class="display-1">Login</h1>
            </v-card-title>
            <v-card-text>
              <v-form>
                <v-text-field
                  label="Username"
                  prepend-icon="mdi-account-circle"
                />
                <v-text-field
                  :type="showPassword ? 'text' : 'password'"
                  label="Password"
                  prepend-icon="mdi-lock"
                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                  @click:append="showPassword = !showPassword"
                />
              </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn class="register bg-teal" elevation="2" variant="elevated"
                >Register</v-btn
              >
              <v-spacer></v-spacer>
              <v-btn class="login" color="primary" elevation="2" variant="flat"
                >Login</v-btn
              >
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-footer app class="d-flex flex-column">
            <div class="bg-teal d-flex w-100 align-center px-4 mx-0">
              <strong>Get connected with us on social networks!</strong>

              <v-spacer></v-spacer>

              <v-btn
                v-for="icon in icons"
                :key="icon"
                class="mx-4"
                :icon="icon"
                variant="plain"
                size="small"
              ></v-btn>
            </div>

            <div class="px-4 py-2 bg-black text-center w-100">
              {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
            </div>
          </v-footer>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    showPassword: false,
  }),
};
</script>

解决方案 #

问题核心在于v-app-bar默认是固定定位（fixed），会脱离文档流，导致父级的v-col和v-row无法感知到它的高度；同时v-col未指定宽度时会自动收缩。可以通过以下几点修复：

• 给v-app-bar添加app属性：让app栏正确融入页面布局流，同时自动处理与其他组件的间距，避免内容被遮挡。
• 给v-col添加cols="12"：确保列占满整行宽度，避免收缩。
• 移除v-col上不必要的d-flex：v-app-bar本身是块级元素，不需要额外flex布局包裹。

修改后的代码：

<template>
  <v-app>
    <v-container fluid>
      <v-row>
        <v-col cols="12">
          <v-app-bar app class="bg-teal">
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-spacer></v-spacer>
            <v-tool-bar-title class="mx-auto">Vuetify Dashboard</v-tool-bar-title>
            <v-spacer></v-spacer>
            <v-btn variant="elevated" class="mr-2" color="primary">Home</v-btn>
            <v-btn variant="elevated" class="mr-5" color="primary">About</v-btn>
          </v-app-bar>
        </v-col>
      </v-row>
      <v-row class="h-screen">
        <v-col class="d-flex align-center justify-center">
          <v-card width="400" class="mx-auto">
            <v-card-title class="my-5">
              <h1 class="display-1">Login</h1>
            </v-card-title>
            <v-card-text>
              <v-form>
                <v-text-field
                  label="Username"
                  prepend-icon="mdi-account-circle"
                />
                <v-text-field
                  :type="showPassword ? 'text' : 'password'"
                  label="Password"
                  prepend-icon="mdi-lock"
                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                  @click:append="showPassword = !showPassword"
                />
              </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn class="register bg-teal" elevation="2" variant="elevated">Register</v-btn>
              <v-spacer></v-spacer>
              <v-btn class="login" color="primary" elevation="2" variant="flat">Login</v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <v-footer app class="d-flex flex-column">
            <div class="bg-teal d-flex w-100 align-center px-4 mx-0">
              <strong>Get connected with us on social networks!</strong>

              <v-spacer></v-spacer>

              <v-btn
                v-for="icon in ['mdi-facebook', 'mdi-twitter', 'mdi-instagram']"
                :key="icon"
                class="mx-4"
                :icon="icon"
                variant="plain"
                size="small"
              ></v-btn>
            </div>

            <div class="px-4 py-2 bg-black text-center w-100">
              {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
            </div>
          </v-footer>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: () => ({
    showPassword: false,
  }),
};
</script>

补充：如果不需要v-app-bar固定在顶部，可以移除app属性，同时给v-app-bar添加fixed="false"（默认即为false），这样它会完全处于文档流中，父级元素也能正确自适应它的高度。

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