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>

话虽这么说，您可能想看看下面的小提琴Here。我已经使该提琴对移动屏幕做出了响应，因此您可能必须将输出窗口的大小调整为更大才能查看侧边栏布局。问题是，您绝对是在div之外定位项目并修复项目，这是不好的做法。在上面的示例中，您评论了很多布局和z-index问题，您将遇到这些问题。这个小提琴只是一个例子，但它应该为您提供一个有关如何考虑布局的良好参考框架。

Answer 2

之所以发生是因为vh是这样工作的。 vh基于视口的高度。 1vh =视口高度的1％。

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

Answer 3

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

因此 100vh 将对应视口高度的100％

demo here

有关更多详细信息，请参阅CSS Units documentation。

为什么这个高度为100vh的div无法覆盖整个视口？

3 个答案: