How to set the height of vuetify card

Vuetify says for height props: Manually define the height of the card

So,in v-card element add height as follow:

<v-card height="100%">

See it in action

I don't know if you could solve your problem... But for your case you can see a solution to the problem here: https://codepen.io/carlos-henreis/pen/djaQKb

<div id="app">
  <v-app id="inspire">
    <v-toolbar color="green" dark fixed app>
      <v-toolbar-title>My Application</v-toolbar-title>
    </v-toolbar>
    <v-content >
      <v-container fluid fill-height >
        <v-layout
          justify-center
          align-center 
        >
          <v-flex text-xs-center fill-height>
              <v-card class="elevation-20" height='100%'>
              <v-toolbar dark color="primary">
                <v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>

              </v-card-text>

            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="green" app inset>
      <span class="white--text">&copy; 2017</span>
    </v-footer>
  </v-app>
</div>

I've commented on the accepted answer that:

<v-card height="100%">

gives an styling issue if you have v-card-actions (card footer).

To equalize the v-text-card component, you should create a custom (SCSS) class:

.flexcard {
  display: flex;
  flex-direction: column;
}
// Add the css below if your card has a toolbar, and if your toolbar's height increases according to the flex display.
.flexcard .v-toolbar {
  flex: 0;
}

Then, add the class to the v-card component, like this:

<v-card class="flexcard" height="100%">
  ... Your code here
</v-card>

I hope this helps if someone is facing the same issue.

Credits to Sindrepm and his CodePen

In addition to the above: The codepen does not include any card images. So in case you are using v-img components in your v-card components like this:

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px" 
    :src=".\sample\image.png">
  </v-img>
...
<v-card>

you probably want to fix their maximum heights ensuring same layout on your v-card components:

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px"
    max-height="200px"
    :src=".\sample\image.png">
  </v-img>
...
<v-card>

i used 100vh or vw. It made it fit the whole height.