如何用Vuetify实现首行填充垂直空间，末行固定于屏幕底部

你的现有思路方向是对的，只需要给容器补充全屏高度的样式，就能让flex布局的垂直空间分配生效。

先看你当前的代码：

<template>
  <v-container class="d-flex flex-column flex-nowrap">
    <v-row class="flex-grow-1"> Content </v-row>
    <v-row> Button </v-row>
  </v-container>
</template>

对应的布局需求示意图：

修改方案 #

给v-container加上min-vh-100类，确保容器至少占满整个视口高度，这样flex-grow-1才能让第一行填充剩余空间：

<template>
  <v-container class="d-flex flex-column flex-nowrap min-vh-100">
    <v-row class="flex-grow-1"> Content </v-row>
    <v-row> Button </v-row>
  </v-container>
</template>

关键说明 #

• min-vh-100：让容器高度至少等于视口高度，这是实现垂直填充的核心前提
• d-flex flex-column flex-nowrap：保持垂直方向的flex容器布局，避免内容换行
• flex-grow-1：第一行的v-row会自动占据容器除第二行外的所有垂直空间，第二行则只占用自身内容所需高度，自然固定在底部

如果不需要容器默认的内边距，可以额外添加pa-0类：

<v-container class="d-flex flex-column flex-nowrap min-vh-100 pa-0">

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