css - 如何让我的 Vue 网页填满整个视口(viewport)？

Question

我正在使用通过 Vue CLI 使用 Vue 3、Vue Router 和 Bootstrap 构建的演示 Web 应用程序。不幸的是，我无法让我的网页填满浏览器窗口的整个高度。

我尝试使用 bootstrap 在最高级别的 div 上设置 vh-100，但它似乎仍然垂直匹配内容的最小高度，而不是消耗整个可见视口(viewport)高度。

如何使我的应用的布局遵循 Bootstrap 的 vh-100 属性？

应用程序.vue

    <template>
  <router-view/>
</template>

<script>

export default {
  name: "App"
}
</script>

登录页面.vue

<template>
  <div class="vh-100 container" id="app">
    <div class="row vh-25">
      <div class="image-container row justify-content-center align-items-center">
        <img src="../assets/images/pic.png" alt="picture">
      </div>
    </div>
    <div class="row vh-75">
      <EmailForm/>
    </div>
  </div>
</template>

<script>
import EmailForm from '@/components/EmailForm.vue'; // @ is an alias to /src

export default {
  components: {
    EmailForm,
  }
}
</script>

<style>
.container {
  margin: 0;
  background: url(~@/assets/images/background_pic.jpg) repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 60%;
  max-width: 60%;
}
</style>

Answer 1

有很多方法可以做到这一点。在 Vue 中，通常 #app 是最高级别，因此您可以在那里设置最小高度。

#app {
  min-height: 100vh;
}

或者您可以将 .container 元素设置为固定位置并覆盖视口(viewport)。

.container {
  position: fixed;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}

这完全取决于您想要做什么。