問題:私の<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
のコンテナーを削除するだけでなく、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>