Vuetify 容器不会填充高度

Posted 2023-02-22

【中文标题】Vuetify 容器不会填充高度

【英文标题】：Vuetify Container Won't Fill Height

【发布时间】：2019-08-06 23:38:49

【问题描述】：

问题：我的<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>

【问题讨论】：

从<v-container> 周围删除main。这是一种反模式，因为它无论如何都会呈现main..

@Ohgodwhy 感谢您的提示！我不知道这是一种反模式。我刚刚在我的应用代码中删除了它。

哦，我明白了。 Vuetify 需要一些努力才能真正理解它是如何工作的。现在开始了解他们如何实现flex-box 布局的有趣部分！

@Ohgodwhy 这是我用 Vuetify 制作的第一个大型应用程序，我觉得我对布局的东西非常了解，除了这个，哈哈。我还没有深入研究的内部工作原理。

【参考方案1】：

所以对我来说，解决方案不仅是删除App.vue 中的容器，还要从<style scoped> 标记中删除html 和body 的样式。我正在设置 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>