Vuetify v-container开启fill-height后子元素上下对齐失效如何解决

问题原因 #

你当前的写法存在两个问题：

1. v-row的align属性仅用于控制行内部v-col元素的垂直对齐规则，无法控制v-row本身在父容器中的垂直位置，所以设置了也不会生效
2. 你没有给v-container配置垂直flex布局规则，无法实现子元素的上下两端对齐

正确实现方案 #

Vuetify内置了flex工具类，不需要额外写自定义CSS即可实现需求，推荐两种适配不同场景的写法：

方案1：mt-auto自适应方案（推荐，适配性更强）

给底部元素添加上边距自动填充剩余空间，就算顶部内容高度超出容器也不会挤压底部元素：

<v-container fluid fill-height class="d-flex flex-column">
  <!-- 顶部按钮区域，自然靠顶对齐 -->
  <v-row>
    <v-col>I want this to align Top</v-col>  
  </v-row>
  <!-- 底部按钮区域，mt-auto会自动占据剩余垂直空间，推到最底部 -->
  <v-row class="mt-auto">
    <v-col>And this to align Bottom</v-col>  
  </v-row>
</v-container>

方案2：两端对齐方案

适合顶部内容高度固定、不会超出容器高度的场景：

<v-container fluid fill-height class="d-flex flex-column justify-space-between">
  <v-row>
    <v-col>I want this to align Top</v-col>  
  </v-row>
  <v-row>
    <v-col>And this to align Bottom</v-col>  
  </v-row>
</v-container>

适配导航抽屉的注意事项 #

放在v-navigation-drawer内使用时，不需要额外修改抽屉默认配置，默认抽屉已经是占满视口高度的，上述代码可以直接复用。如果需要底部按钮固定不跟随滚动，可以给底部v-row额外加sticky或者fixed定位类即可。

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