如何让Vuetify组件填充屏幕剩余高度？

解决方案思路 #

直接用Vuetify自带的flex布局类就能搞定：给外层容器设置满高+垂直弹性布局，让上下内容保持固定高度，表格区域自动填充剩下的空间，再给表格加滚动控制避免内容溢出。

完整代码示例 #

<template>
  <v-app>
    <v-main>
      <!-- 外层容器：满高+垂直弹性布局 -->
      <div class="d-flex flex-column fill-height pa-2">
        <!-- 上方固定内容 -->
        <v-alert type="success" title="Some content above" class="mb-2"></v-alert>
        <div class="my-2">some more content</div>

        <!-- 表格区域：自动填充剩余高度，内容溢出时显示滚动条 -->
        <div class="flex-grow-1 overflow-auto">
          <v-table>
            <thead>
              <tr>
                <th>Col 1</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in 100" :key="i">
                <td>{{ i }}</td>
              </tr>
            </tbody>
          </v-table>
        </div>

        <!-- 下方固定分页 -->
        <v-pagination :model-value="1" :length="10" class="my-2"></v-pagination>
      </div>
    </v-main>
  </v-app>
</template>

关键类说明 #

• fill-height：让最外层容器占满v-main的全部可用高度，v-main默认会自动适配页面除去导航栏等元素后的剩余空间。
• d-flex flex-column：把外层容器改成垂直方向的弹性布局，内部元素按从上到下的顺序排列。
• flex-grow-1：给表格的外层div添加这个类，它会自动填充上下固定内容之外的所有剩余高度，实现表格区域的自适应。
• overflow-auto：当表格内容超出容器高度时，自动显示垂直滚动条，避免内容溢出挤走下方的分页或撑出页面。

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