How do you have an element fill the remaining height in vuetify 2.0?

Question

I am attempting to create a view where there is a top element with a secondary element vertically centered in the remaining space underneath it.

In my attempt, there is a section of whitespace that gets added below the second element which extends the height of the page instead of just filling it as intended.

A recreation of this issue can be found here: 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>

I feel I may be misunderstanding the syntax after the upgrade to 2.0 and not using v-row and v-col in the right way with fill-height. Any help is appreciated, thank you!

Answer 1

It seems like you're using too many v-rows and v-cols. You can get rid of a lot of those if you just want one card after another stacked in a column. The revised codepen is here: 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>