如何在Vuetify 3中独立设置v-card高度且不使用静态高度？

要实现v-card自适应父容器剩余空间、内部内容超出时滚动的效果，无需设置静态高度，可通过Flex布局和溢出控制实现，具体修改如下：

关键修改点 #

• 让v-card采用flex垂直布局，确保子元素自动分配空间
• 给v-card-text设置flex-grow: 1和overflow-y: auto，使其填充v-card剩余高度，内容超出时自动滚动
• 确保父级容器高度继承链完整，让v-card能获取正确的可用高度

修改后的代码 #

<template>
  <v-app id="app">
    <Header></Header>
    <NavigationDrawer></NavigationDrawer>
    <v-main class="d-flex flex-column"> <!-- 改为flex垂直布局 -->
      <v-container class="cardContainer pa-0 pr-4 pb-4 flex-grow-1" fluid>
        <v-card id="vcard" class="d-flex flex-column h-100"> <!-- 启用flex垂直布局，占满父容器高度 -->
          <v-card-text class="flex-grow-1 overflow-y-auto"> <!-- 填充剩余高度，内容溢出时滚动 -->
            <router-view :key="$route.path"></router-view>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<style>
.cardContainer {
  height: 100%;
}
</style>

原理说明 #

1. v-main设置d-flex flex-column：让容器内部元素垂直排列，确保子容器正确继承高度
2. v-card添加d-flex flex-column h-100：使v-card成为flex容器，垂直排列子元素，同时占满父容器100%高度
3. v-card-text添加flex-grow-1：自动填充v-card的剩余可用高度（若v-card有标题、按钮栏等元素，会自动扣除这些元素的高度）；overflow-y: auto则在内容高度超过可用空间时，显示垂直滚动条

设置完成后，v-card会自适应v-main的剩余空间（减去Header和NavigationDrawer的高度），当router-view内容过多时，仅在v-card-text内部滚动，v-card尺寸保持不变。

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