vuetify.js - Vuetify 网格系统。如何将 block 放置在其余高度上？

Question

如何制作 block “粉红色盒子”，放置在 Vuetify 网格系统中的其余高度上？ “高度:100%”工作不正确。列弯曲方向和“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 上查看已运行的代码片段:

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

Answer 1

我们必须在容器中使用两个嵌套布局。 第一列，用于文本 block 和剩余高度框。 其次，嵌套 - 行换行，用于放置在文本 block 中的正确 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 上查看解决方案代码片段:

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