Problem: My <v-container> component doesn't always go to the height of the application. I have tried using the fill-height property, setting height: 100%;, setting height: 100vh;, even tried using max-height. I can't seem to get the results that I want!

Goal: 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.

Code for App.vue:

<template>

  <v-app>

    <main>

      <v-container

        fluid

        fill-height

        id=app

        tag=div

        style=height: 100vh; max-height: 100%;

        :class=theme

      >

        <Toolbar color=primary />

        <transition

          name=routerAnimation

          enter-active-class=animated faster fadeIn

        >

          <router-view></router-view>

        </transition>

        <v-snackbar

          :color=alertColor

          class=animated faster heartBeat

          :dark=isDark

          v-model=alert

          :multi-line=mode === 'multi-line'

          :timeout=alertTimeout

          top

          :vertical=mode === 'vertical'

        >

          <v-icon class=pr-4>{{ getAlertIcon() }}</v-icon>

          {{ alertMessage }}

          <v-btn :dark=isDark icon @click=toggleAlert(false)>

            <v-icon>close</v-icon>

          </v-btn>

        </v-snackbar>

      </v-container>

    </main>

  </v-app>

</template>



<script>

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();

  }

};

</script>



<style>

@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;

}

</style>