Vue.js（Vuetify）开发：如何限制V-Card内网格列表高度？

我之前开发Vue+Vuetify项目时也碰到过一模一样的问题！Vuetify的网格组件默认会随着内容数量自动撑高，放在V-Card里确实容易占据过多空间，给你几个实用的解决方案：

• 直接给网格容器设置最大高度+滚动
  最简单的方式是给网格的外层容器（或者网格本身）添加max-height和overflow-y: auto样式，这样当内容超过设定高度时就会自动出现垂直滚动条。比如：

  <v-card>
    <v-card-title>数据展示</v-card-title>
    <v-card-text>
      <v-grid
        style="max-height: 450px; overflow-y: auto;"
        cols="3"
        gap="2"
      >
        <!-- 你的网格元素 -->
        <v-card v-for="item in items" :key="item.id" min-height="120">
          <!-- 元素内容 -->
        </v-card>
      </v-grid>
    </v-card-text>
  </v-card>
  

  你也可以用Vuetify内置的工具类来代替内联样式，比如overflow-y-auto加上自定义高度类，让代码更贴合Vuetify的风格。

• 使用Vuetify的v-scroll-y组件
  Vuetify提供了专门处理垂直滚动的v-scroll-y组件，用它包裹网格会更优雅，而且可以直接通过组件属性设置最大高度：

  <v-card>
    <v-card-title>数据展示</v-card-title>
    <v-scroll-y max-height="450">
      <v-grid cols="3" gap="2">
        <!-- 你的网格元素 -->
      </v-grid>
    </v-scroll-y>
  </v-card>
  

  这个组件会自动处理滚动区域的样式，不用额外写CSS，非常省心。

• 动态计算高度适配不同场景
  如果需要适配不同屏幕尺寸，可以用Vue的绑定语法动态计算高度，比如基于视口高度或者父容器高度：

  <v-card>
    <v-card-title>数据展示</v-card-title>
    <v-card-text
      :style="{ maxHeight: `calc(100vh - 250px)`, overflowY: 'auto' }"
    >
      <v-grid cols="3" gap="2">
        <!-- 你的网格元素 -->
      </v-grid>
    </v-card-text>
  </v-card>
  

  这种方式能让滚动区域自适应屏幕，在不同设备上都有不错的表现。

另外要注意：如果网格内的元素高度不一致，可能会导致滚动时布局看起来有点乱，建议给网格内的子元素设置统一的min-height或者固定高度，提升视觉一致性。

内容的提问来源于stack exchange，提问作者L. Gangemi