在 vuetify 2.x 组件上使用填充高度答案

【问题标题】：using fill-height on a vuetify 2.x component在 vuetify 2.x 组件上使用填充高度
【发布时间】：2021-02-14 17:46:12
【问题描述】：

我有一个使用 Vuetify (2.x) 网格的应用程序，我无法让组件填充屏幕的剩余高度。

我曾尝试将fill-height 属性用于v-row，但是这只填充了屏幕高度的一小部分：

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row>
          <v-col cols="12">
            <v-card elevation="2" class="pa-3">
            Row 1  
            </v-card>
        </v-col>
      </v-row>
      
      <v-row class="fill-height">
        <v-col cols="12">
          <v-card elevation="2" class="pa-3">  
            Row 2
          </v-card>
        </v-col>
      </v-row>
      
      <v-row>
        <v-col cols="12">
          <v-card elevation="2" class="pa-3">  
            Row 3
          </v-card>
        </v-col>
      </v-row>
    </v-container>       
  </v-app>
</div>

需要做什么才能使 第 2 行 填满屏幕剩余的可用高度？

https://codepen.io/deftonez4me/pen/LYZmOzy?editors=1010

【问题讨论】：

标签： javascript css vuejs2 vue-component vuetify.js

【解决方案1】：

您可以像这样使用 flex 实用程序类...

<v-container class="grow d-flex flex-column flex-nowrap">
  <v-row class="shrink">
     <v-col cols="12">
      <v-card elevation="2" class="pa-3">
        Row 1  
      </v-card>
    </v-col>
  </v-row>
  
  <v-row class="grow">
     <v-col cols="12">
      <v-card elevation="2" class="pa-3 fill-height">  
        Row 2
      </v-card>
    </v-col>
  </v-row>
  
  <v-row class="shrink">
    <v-col cols="12">
      <v-card elevation="2" class="pa-3">  
        Row 3
      </v-card>
    </v-col>
  </v-row>
</v-container>

Demo

【讨论】：