javascript - 在 vuetify 2.x 组件上使用填充高度

Question

我有一个使用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

标签： javascriptcssvuejs2vue-componentvuetify.js

Answer 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>  

演示