Vuetify Container Won't Fill Height
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 "./components/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],
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: ""
};
},
methods: {
init() {
const token = TokenService.getToken();
const user = UserService.getUser();
if (token) {
this.$store.commit("token", token);
this.setExpiry();
}
if (user) {
this.$store.commit("user", JSON.parse(user));
}
}
},
mounted() {
this.init();
},
watch: {}
};
</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";
#app {
font-family: "Hilda-Regular", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
Evan Bechtol
Hello, I'm Evan. I currently work as a web Applications Developer in Texas. I primarily work with designing and developing user interfaces, but am a full-stack developer with hands-on experience working with everything from bare metal servers, VM's, containers, and various back-end/front-end technologies. Here are some of the things that I enjoy working with: Vue.js Vuetify.js Node.js Algorithms UI/UX design and development CI/CD MongoDB NoSQL DB's SQL DB's Python
Updated on July 09, 2022Comments
-
Evan Bechtol almost 2 years
Problem: My
<v-container>
component doesn't always go to the height of the application. I have tried using the fill-height property, settingheight: 100%;
, settingheight: 100vh;
, even tried usingmax-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>