Question

我正在学习 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>

这就是网站目前的样子。image

Answer 1

您可以使用 height: 100vh 代替 height: 100%。 vh本身就是Viewport Height，如果我们使用10vh作为值，它会占据当前视口高度的10%。由于侧边栏和主类在主体内部，因此高度将引用父类，即主体。因此，占据了 100% 的体类，即 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>

Answer 2

为了使 % 中的高度起作用，所有父元素都设置了高度。在您的情况下，<body> 的 % 高度为 100%，但它是父级，HTML 没有设置高度。

所以你的代码应该是

html, body {
 height: 100%;
}

^* <html> 是一个例外，因为它是根并且没有父。

另一种选择是使用注释中提到的 vh 单位，它相对于 view port 的高度而不是父级，与 % 单位不同。

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

2 个答案: