Vuetify弹性工具栏与卡片布局：实现内容全屏高度后滚动

我明白你的需求啦——不想用固定像素的max-height来限制卡片内容，而是让卡片先占满当前屏幕的可用高度，当内容超过这个高度时再自动出现滚动条对吧？这其实可以通过Vuetify的Flexbox布局类加上一点简单的样式来实现，完全不需要固定数值。

核心思路 #

利用Vuetify内置的flex布局工具，让卡片容器垂直拉伸至全屏高度，然后让卡片文本区域占据卡片内的所有剩余空间，只有当内容超出这个空间时才触发滚动。

具体实现步骤 #

1. 确保父容器全屏高度：首先要保证你的卡片所在的父级元素（比如<v-app>、<v-container>）设置了h-100类，这样卡片才能基于全屏高度来计算自己的尺寸。
2. 设置卡片为flex容器：给<v-card>添加d-flex flex-column h-100类，让卡片内部元素垂直排列，并且卡片本身占满父容器高度。
3. 让文本区域自适应剩余空间：给<v-card-text>添加flex-grow-1 overflow-y-auto类。flex-grow-1会让这个区域占据卡片内除了工具栏、操作栏之外的所有剩余高度，overflow-y-auto则会在内容超出时自动显示垂直滚动条。

示例代码 #

<v-app class="h-100">
  <v-container fluid class="h-100 pa-0">
    <v-card class="d-flex flex-column h-100">
      <!-- 弹性工具栏 -->
      <v-toolbar color="primary" dark>
        <v-toolbar-title>Flexible Toolbar</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>

      <!-- 自适应高度的滚动内容区 -->
      <v-card-text class="flex-grow-1 overflow-y-auto">
        <!-- 这里放你的长内容 -->
        <p v-for="n in 50" :key="n">
          这是测试内容行 {{ n }}，用来模拟超出屏幕高度的文本。
        </p>
      </v-card-text>

      <!-- 卡片操作栏 -->
      <v-card-actions>
        <v-btn text>保存</v-btn>
        <v-btn text>取消</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</v-app>

为什么这样有效？ #

• h-100：让整个应用和容器都占满视口高度，为卡片提供了全屏的基础空间。
• d-flex flex-column：把卡片变成垂直方向的flex容器，内部元素（工具栏、文本区、操作栏）会按垂直方向排列。
• flex-grow-1：让文本区域“吃掉”卡片内所有未被工具栏和操作栏占用的空间，实现自适应剩余高度。
• overflow-y-auto：只有当文本内容超出这个自适应高度时，才会显示滚动条，完美符合你的需求。

额外注意 #

如果你的页面顶部有其他固定高度的导航栏（比如全局的<v-app-bar>），可以给卡片容器加上mt-[导航栏高度]或者用calc(100vh - 导航栏高度)来调整，但Vuetify的flex布局通常会自动处理这种嵌套的高度关系，只要父级都正确设置了h-100就行。

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