为什么这个高度为 100vh 的 div 没有覆盖整个视口?

Question

此代码中的蓝色div的高度为100vh，而红色div的高度为5000px。由于 100vh 高度属性，蓝色div 不应该扩展自身以覆盖整个视口吗？

body {
margin: 0;
}

<div style="position: absolute; left: 35%; width: 100px; height: 100vh; background-color: blue;">
</div>
<div style="position: absolute; left: 50%; width: 100px; height: 5000px; background-color: red;"></div>

我想从中实现的是，假设有一些文本在调整窗口大小时溢出，那么我应该如何解决这种情况，以便 100vh 高度的div 再次覆盖新的窗口大小？

Answer 1

视口高度只是意味着元素的高度将是视口的百分比。 视口是您查看页面的窗口。 因此，如果是 1920x1080 屏幕，视口高度将为 1080px 或任何浏览器窗口，如果您在屏幕底部有一个工具栏，则视口高度可能会更低。 您遇到的问题是，如果您希望侧边栏跟随页面下方的主要内容，则需要忽略视口并在它们周围有一个包装器，如下所示：

.main-wrapper{
display:flex;
}
aside{
background:blue;
color:#fff;
width:200px;
}
main{
background:green;
height:5000px;
flex:1
}

<div class="main-wrapper">
<aside>Your sidebar</aside>
<main>Your Main Content</main>
</div>

话虽如此，您可能想在这里查看以下小提琴。 我已经使这个小提琴响应于移动屏幕，因此您可能需要调整输出窗口的大小才能查看侧边栏布局。 问题是您绝对在div 之外定位项目并修复项目，这是不好的做法。 在上面评论的示例中，您会遇到许多布局和 z 索引问题。 这个小提琴只是一个示例，但它应该给你一个很好的参考框架，说明应该如何考虑布局。

Answer 2

它正在发生，因为这就是 vh 的工作方式。 VH 基于视口的高度。1vh = 视口高度的 1%。

https://www.sitepoint.com/css-viewport-units-quick-start/

Answer 3

1vh相对于视口高度的 1%*

所以100vh将对应于视口高度的 100%

演示在这里

有关更多详细信息，请参阅 CSS 单元文档。