Vuetify 全屏属性未创建具有 height:100% 的元素

Question

我对 Vue.js 和 Vuetify 框架还是很陌生。我目前正在尝试在 Vuetify 中创建一个 css 属性为 height:100% 的首页元素，但由于某种原因我无法用第一行元素填充页面。

如下所示，我在 v 行元素中使用 "fullscreen" Vuetify 属性。

谢谢！

<template>
      <div class="home">
        <v-row class="grey fullscreen" align="center" justify="space-around">
          <v-col xs=12 md=5>
            <h1 class="main-title">Clever and<br> Practical Designs<span class="redDot">.</span></h1>
            <h3 class="sub-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo exercitationem repellat, officia consequuntur obcaecati voluptate cum voluptas placeat dolores temporibus vel ex saepe reprehenderit porro asperiores cumque distinctio accusantium optio.</h3>
              <v-row>
                <v-btn href="" class="button white--text pa-4">
                View our Products
                </v-btn>
              </v-row>
          </v-col>
          <v-col xs=12 md=5>
            <v-img contain class="homeimg" max-width="500px" src="../assets/Large_product.png"></v-img>
          </v-col>
        </v-row>
      </div>
</template>

Answer 1

我找到了解决方案：

在 App.vue 文件中添加样式元素以使全屏 class 正常运行：

<template>
  <v-app>
    <Navbar />
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: { Navbar },
  data: () => ({
    //
  }),
};
</script>
<style lang="scss">
.fullscreen {
  width: 100%;
  height: 100vh;
}
</style>

Vuetify 全屏属性未创建具有 height:100% 的元素

Vuetify Fullscreen property not creating an element with height:100%

height

vue.js

vuetify.js

Vuetify 全屏 属性 未创建具有 height:100% 的元素

Vuetify Fullscreen property not creating an element with height:100%

height

vue.js

vuetify.js

Vuetify 全屏属性未创建具有 height:100% 的元素