vuetify.js - 你如何让一个元素填充 vuetify 2.0 中的剩余高度？

Question

我正在尝试创建一个 View ，其中有一个顶部元素，第二个元素垂直居中位于其下方的剩余空间中。

在我的尝试中，在第二个元素下方添加了一段空白，它扩展了页面的高度，而不是按预期填充它。

可以在此处找到此问题的重现:https://codepen.io/R3d4rmy/pen/BaBjvwy

<div id="app">
  <v-app id="inspire">
    <v-app-bar app color="indigo" dark>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
        <v-content>
            <v-container fluid class="fill-height">
        <v-row class="fill-height">
          <v-col
            cols="12"
            sm="10"
            offset-sm="1"
            md="8"
            offset-md="2"
            lg="6"
            offset-lg="3"
            xl="4"
            offset-xl="4"
          >
            <v-row class="fill-height">
                <v-col cols="12">
                  <v-row class="no-gutters">
                    <v-col cols="12">
                      <v-card class="mb-6" outlined>
                        <v-card-title>
                          Title
                        </v-card-title>
                        <v-card-text>
                          <div class="subtitle-2">
                            Subtitle
                          </div>
                        </v-card-text>
                        <v-divider class="mx-4"></v-divider>
                        <v-card-text>
                          <v-text-field
                            flat
                            single-line
                          ></v-text-field>
                        </v-card-text>
                      </v-card>
                    </v-col>
                  </v-row>
                  <v-row class="fill-height no-gutters" align="center">
                    <v-col cols="12">
                      <v-row class="no-gutters" justify="center">
                        <v-col align-self="center" cols="12">
                          <v-card class="mb-6" outlined>
                            <v-card-title>
                              Why is there extra whitespace below this v-card?
                            </v-card-title>
                            <v-card-text>
                              <div class="subtitle-2">
                                And how do I get this v-card properly centered in the remaining space below the first v-card?
                              </div>
                            </v-card-text>
                          </v-card>
                        </v-col>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </v-content>

    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2019</span>
    </v-footer>
  </v-app>
</div>

我觉得升级到 2.0 后我可能会误解语法，并且没有以正确的方式使用填充高度的 v-row 和 v-col。任何帮助表示赞赏，谢谢!

Answer 1

看起来你使用了太多的 v-rows 和 v-cols。如果您只想将一张又一张的卡片堆叠在一列中，您可以摆脱很多。修改后的代码笔在这里:https://codepen.io/CodingDeer/pen/KKPzxYW

<div id="app">
  <v-app id="inspire">
    <v-app-bar app color="indigo" dark>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
        <v-content>
            <v-container fluid class="full-height">
        <v-row class="fill-height">
          <v-col
            cols="12"
            sm="10"
            offset-sm="1"
            md="8"
            offset-md="2"
            lg="6"
            offset-lg="3"
            xl="4"
            offset-xl="4"
          >
            <v-card class="mb-6" outlined>
              <v-card-title>
                Title
              </v-card-title>
              <v-card-text>
                <div class="subtitle-2">
                  Subtitle
                </div>
              </v-card-text>
              <v-divider class="mx-4"></v-divider>
              <v-card-text>
                <v-text-field
                              flat
                              single-line
                              ></v-text-field>
              </v-card-text>
            </v-card>
            <v-col cols="12" class="pa-0 fill-height" justify-self='center'>
              <v-row
                align="center"
                justify="center"
                class="fill-height"
              >
                <v-card outlined>
                  <v-card-title>
                    Why is there extra whitespace below this v-card?
                  </v-card-title>
                  <v-card-text>
                    <div class="subtitle-2">
                      And how do I get this v-card properly centered in the remaining space below the first v-card?
                    </div>
                  </v-card-text>
                </v-card>
              </v-row>
            </v-col>
          </v-col>
        </v-row>
      </v-container>
    </v-content>

    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2019</span>
    </v-footer>
  </v-app>
</div>