Vuetify 网格系统。如何使块放置在其余高度上？答案

【问题标题】：Vuetify grid system. How to make block placed on rest of height?Vuetify 网格系统。如何使块放置在其余高度上？
【发布时间】：2018-04-10 15:19:10
【问题描述】：

如何在 Vuetify 网格系统的其余高度上制作块“粉色框”？ “身高：100%”工作不正确。列 flex 方向和 "flex: 1" 打破 xs6 布局。

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-md fill-height>
        <v-layout row wrap align-content-start>
          <v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
          <v-flex xs12 class="pink-box">Rest height box</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

在 Codepen 上查看工作代码 sn-p：

https://codepen.io/profsoft/pen/wmQRvm

【问题讨论】：

rest of height 是什么意思？ height: 100% 填充了剩余的高度，这不是你描述的吗？
是的，在文本之后填充可见容器的剩余高度。 "height: 100%" 将我的块的高度设置为容器的高度。结果，我的块超出了可见容器的底部边框，出现了滚动。

标签： vuetify.js

【解决方案1】：

我们必须在容器中使用两个嵌套布局。第一列，用于文本块和静止高度框。其次，嵌套-换行，用于正确放置在文本块中的 12 点网格系统。

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-md fill-height>
        <v-layout column>
          <v-flex>
            <v-layout row wrap align-content-start>
              <v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
            </v-layout>
          </v-flex>
          <v-flex xs12 class="pink-box">Rest height box</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

在 Codepen 上查看解决方案代码 sn-p：

https://codepen.io/profsoft/pen/KoLMrz

【讨论】：

仅供参考，通过链接提供的示例不起作用。它可能需要结帐。