如何使Vuetify中的两行恰好占据屏幕的一半答案

【问题标题】：How make two rows in Vuetify occupy exactly half of the screen如何使Vuetify中的两行恰好占据屏幕的一半
【发布时间】：2021-11-20 10:49:30
【问题描述】：

这似乎是一项微不足道的任务，但我迷路了。

我只希望v-main 的上半部分被一个v-row 占据，另一半被另一个v-row 占据，如果一行的内容更大，那么它将是可滚动的。

这里是 MWE：https://codepen.io/chapkovski/pen/abwPYda

html:


<div id="app">
  <v-app id="inspire">
    <v-app-bar color="#6A76AB" dark app>
      &nbsp

    </v-app-bar>
    <v-main class='d-flex flex-column' app>
      <v-container fluid>
        <v-row class='yellow d-flex flex-column ' style='height:50%'>
          <v-col v-for='item in items'>{{item}}</v-col>
        </v-row>
        <v-row class='red' fill-height style='height:50%'>RED</v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

css:

.yellow {
  overflow-y: scroll;
  max-height:50%
}

和js


new Vue({
  el: "#app",

  vuetify: new Vuetify(),
  data: () => ({ items: _.range(1, 100) }),

  watch: {},
  methods: {}
});

【问题讨论】：

如果直接父级没有固定的高度值，那么您的 50% 高度不会做任何事情...（50% 什么？）...如果父级有百分比高度值...他的直接父母再次需要一个固定的高度...如果所有高度都将使用百分比，那么您必须为所有父母层次结构设置一个高度值，直到（包括）body 和 html。只需添加 .container {height:500px;} 你就会明白我的意思了。
谢谢！我添加了fill-height，现在两行都是 50% 但很大（比整个屏幕大得多）：codepen.io/chapkovski/pen/abwPYda
ya fill-height 也可以，但如果我更喜欢使用其中之一！（填充高度或高度着装）

标签： css vue.js vuetify.js

【解决方案1】：

你可以使用https://vuetifyjs.com/en/components/grids/#usage中描述的断点

在此示例中，对于小屏幕，列大小为 12，对于较大屏幕，列大小为 6，即最大大小的一半。

    <v-container class="grey lighten-5">
        <v-row no-gutters>
          <v-col cols="12" sm="12" md="6">
             a
          </v-col>
          <v-col cols="12" sm="12" md="6">
             b
          </v-col>
        </v-row>
      </v-container>

【讨论】：