Problem:My <v-container>
组件并不总是达到应用程序的高度.我试过使用fill-height属性,设置height: 100%;
,设置height: 100vh;
,甚至试过使用max-height
.我似乎无法得到我想要的结果!
Goal:我希望我的容器始终横跨windows 的整个高度.我在应用程序上的主题在亮/暗之间变化.这会更改背景色,背景色应始终覆盖应用程序视图端口的整个高度和宽度.
Code for 100:
<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>