时间戳

首页 > 解决方案 > 如何让一个 Vue 组件占据整个浏览器高度？

javascript - 如何让一个 Vue 组件占据整个浏览器高度？

问题描述

我正在学习 Vue 3，我正在尝试为我正在尝试构建的应用程序制作一个简单的侧边栏

我有两个 div:main和sidebar, 我给了他们两个（和身体）height: 100%

但是，div 并没有占据窗口的整个高度。

这是我的代码：

<template>
  <div class="sidebar">
    sidebar
  </div>
  <div class="main">
    hi
  </div>
</template>

<style>
body {
  height: 100%;
}

.sidebar {
  width: 12%;
  height: 100%;
  float: left;
  background-color: red;
}

.main {
  margin-left: 12%;
  height: 100%;
  background-color: blue;
}
</style>

这就是网站目前的样子。图片

标签： javascriptcssvue.js

解决方案

您可以使用height: 100vh而不是height: 100%. vh本身的意思是Viewport Height，如果我们使用10vh作为值，它将占据当前视口高度的10%。由于侧边栏和主类在主体内部，因此高度将引用父类，即主体。因此，占据了100%的body class，也就是100vh。

<template>
  <div class="sidebar">
    sidebar
  </div>
  <div class="main">
    hi
  </div>
</template>

<style>
body {
  height: 100vh;
}

.sidebar {
  width: 12%;
  height: 100%;
  float: left;
  background-color: red;
}

.main {
  margin-left: 12%;
  height: 100%;
  background-color: blue;
}
</style>

推荐阅读