Vuetify 网格高度一排增长，一排固定在底部答案

【问题标题】：Vuetify grid height one row that grows and one fixed at the bottomVuetify 网格高度一排增长，一排固定在底部
【发布时间】：2021-06-01 13:27:00
【问题描述】：

我正在为我的grid rows 实施Vuetify Flex，但在上课时遇到了问题。

这个容器中有两个 v-row，我希望第一个增加所有可用高度，并将第二个保持在底部但仍然显示。

我想要的图片：

code

到目前为止，这是我的代码笔：https://codepen.io/5less/pen/mdWpjWR

【问题讨论】：

标签： css flexbox vuetify.js

【解决方案1】：

根据您要实现的目标，可能会有不同的解决方案，但根据图片中显示的内容，您可以将style="height: 90vh" 用于第一个v-row，将style="height: 10vh" 用于第二个。查看下面的代码，看看是否有帮助：

// you can ignore this line
Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

.br {
  border: 2px solid red;
}

.bb {
  border: 2px solid blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row class="br" style="height: 90vh"></v-row>
        <v-row class="bb" style="height: 10vh"></v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

【讨论】：

“我希望第一个增加所有可用高度 [...]”听起来更像：底行应该适合它的内容，顶行应该占据所有剩余空间。
@Fred 是的，你是对的，这就是我所追求的。另外：通过使用 vh，我在桌面/移动屏幕上得到了不同的结果。