title: Vuetify Container Won't Fill Height
body: <p><strong>Problem</strong>: My <code>&lt;v-container&gt;</code> component doesn't always go to the height of the application. I have tried using the <a href="https://vuetifyjs.com/en/framework/grid#api" rel="noreferrer">fill-height</a> property, setting <code>height: 100%;</code>, setting <code>height: 100vh;</code>, even tried using <code>max-height</code>. I can't seem to get the results that I want!</p>
  
  <p><strong>Goal</strong>: I want my container to always span the entire height of the window. My theme on the application changes between light/dark. This changes the background color, which should always cover the entire height and width of the application view port.</p>
  
  <p><a href="https://i.stack.imgur.com/135Ip.png" rel="noreferrer"><img src="https://i.stack.imgur.com/135Ip.png" alt="Background not covering entire height"></a>
  <a href="https://i.stack.imgur.com/2z83U.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2z83U.png" alt="Showing container not spanning entire height"></a></p>
  
  <p><strong>Code for <code>App.vue</code></strong>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;main&gt;
        &lt;v-container
          fluid
          fill-height
          id="app"
          tag="div"
          style="height: 100vh; max-height: 100%;"
          :class="theme"
        &gt;
          &lt;Toolbar color="primary" /&gt;
          &lt;transition
            name="routerAnimation"
            enter-active-class="animated faster fadeIn"
          &gt;
            &lt;router-view&gt;&lt;/router-view&gt;
          &lt;/transition&gt;
          &lt;v-snackbar
            :color="alertColor"
            class="animated faster heartBeat"
            :dark="isDark"
            v-model="alert"
            :multi-line="mode === 'multi-line'"
            :timeout="alertTimeout"
            top
            :vertical="mode === 'vertical'"
          &gt;
            &lt;v-icon class="pr-4"&gt;{{ getAlertIcon() }}&lt;/v-icon&gt;
            {{ alertMessage }}
            &lt;v-btn :dark="isDark" icon @click="toggleAlert(false)"&gt;
              &lt;v-icon&gt;close&lt;/v-icon&gt;
            &lt;/v-btn&gt;
          &lt;/v-snackbar&gt;
        &lt;/v-container&gt;
      &lt;/main&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Toolbar from "./components/Toolbar";
  import { themeMixin } from "./mixins/themeMixin.js";
  import { alertMixin } from "./mixins/alertMixin";
  import { authMixin } from "./mixins/authMixin";
  import { socketMixin } from "./mixins/socketMixin";
  import { TokenService } from "./services/tokenService";
  import { ThemeService } from "./services/themeService";
  import { UserService } from "./services/userService";
  import { cordMixin } from "./mixins/cordMixin";
  
  export default {
    name: "app",
    mixins: [alertMixin, authMixin, cordMixin, themeMixin, socketMixin],
    components: { Toolbar },
    created() {
      this.init();
      const theme = ThemeService.getTheme();
  
      if (theme !== null) {
        this.$store.commit("theme", theme);
      } else {
        this.$store.commit("theme", this.isDark ? "dark" : "light");
      }
    },
    data() {
      return {
        color: "#0c0c0c",
        y: "top",
        x: null,
        mode: ""
      };
    },
    mounted() {
      this.init();
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  @import "https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
  @import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons";
  
  html {
    height: 100%;
  }
  body {
    height: 100%;
    margin: 0 auto 0;
  }
  #app {
    height: 100%;
    font-family: "Hilda-Regular", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .page {
    width: inherit;
  }
  &lt;/style&gt;
  
  </code></pre>