[英]Vuetify Container Won't Fill Height
問題:我的<v-container>
組件並不總是達到應用程序的高度。 我試過使用fill-height屬性,設置height: 100%;
,設置height: 100vh;
,甚至嘗試使用max-height
。 我似乎無法得到我想要的結果!
目標:我希望我的容器始終跨越窗口的整個高度。 我的應用主題在明暗之間變化。 這會更改背景顏色,背景顏色應始終覆蓋應用程序視口的整個高度和寬度。
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>
所以我的解決方案不僅是刪除App.vue
中的容器,還要刪除<style scoped>
標簽中的html
和body
<style scoped>
。 我正在設置height: 100%;
這在動態加載內容時導致了一些問題。
正確的App.vue
如下所示:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.