Problem: My <v-container> ponent 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 "./ponents/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],
  ponents: { Toolbar },
  created() {
    this.init();
    const theme = ThemeService.getTheme();

    if (theme !== null) {
      this.$storemit("theme", theme);
    } else {
      this.$storemit("theme", this.isDark ? "dark" : "light");
    }
  },
  data() {
    return {
      color: "#0c0c0c",
      y: "top",
      x: null,
      mode: ""
    };
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
@import ".5.94/css/materialdesignicons.min.css";
@import ":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>

Problem: My <v-container> ponent 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 "./ponents/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],
  ponents: { Toolbar },
  created() {
    this.init();
    const theme = ThemeService.getTheme();

    if (theme !== null) {
      this.$store.mit("theme", theme);
    } else {
      this.$store.mit("theme", this.isDark ? "dark" : "light");
    }
  },
  data() {
    return {
      color: "#0c0c0c",
      y: "top",
      x: null,
      mode: ""
    };
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
@import "https://cdn.materialdesignicons./2.5.94/css/materialdesignicons.min.css";
@import "https://fonts.googleapis./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>

• javascript
• html
• css
• vue.js
• vuetify.js

• 1 remove main from around <v-container>. That's an anti pattern because it renders main anyway.. – Ohgodwhy Commented Mar 15, 2019 at 20:32
• @Ohgodwhy Thanks for the tip! I wasn't aware that it was an anti-pattern. I just removed it in my app code. – Evan Bechtol Commented Mar 15, 2019 at 20:34
• Oh, I get it. Vuetify takes some leg work to really get to understand how it works. Now on to the fun part of understanding how they've implemented their flex-box layouts! – Ohgodwhy Commented Mar 15, 2019 at 20:44
• @Ohgodwhy This is my first big app that I have made with Vuetify, I feel like I understand the layout stuff pretty well, with this exception lol. The inner-workings I have yet to dig into. – Evan Bechtol Commented Mar 15, 2019 at 20:51

1 Answer 1

So the solution for me was to not only remove the container in App.vue, but to also remove the styles from the <style scoped> tag for both html and body. I was setting the height: 100%; which caused some issues when content was dynamically loaded in.

The correct App.vue looks like this:

<template>
  <v-app id="app" :dark="isDark">
    <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-app>
</template>

<script>
import { themeMixin } from "./mixins/themeMixin.js";
import Toolbar from "./ponents/Toolbar";
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],
  ponents: { Toolbar },
  created() {
    this.init();
    const theme = ThemeService.getTheme();

    if (theme !== null) {
      this.$store.mit("theme", theme);
    } else {
      this.$store.mit("theme", this.isDark ? "dark" : "light");
    }
  },
  data() {
    return {
      color: "#0c0c0c",
      y: "top",
      x: null,
      mode: ""
    };
  },
  methods: {
    init() {
      const token = TokenService.getToken();
      const user = UserService.getUser();

      if (token) {
        this.$store.mit("token", token);
        this.setExpiry();
      }

      if (user) {
        this.$store.mit("user", JSON.parse(user));
      }
    }
  },
  mounted() {
    this.init();
  },
  watch: {}
};
</script>

<style>
@import "https://cdn.materialdesignicons./2.5.94/css/materialdesignicons.min.css";
@import "https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons";

#app {
  font-family: "Hilda-Regular", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>