小编Red*_*rmy的帖子

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

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

可以在此处找到此问题的重现：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> …