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

【问题标题】：Why is this div with 100vh height not covering the whole viewport?为什么这个高度为 100vh 的 div 没有覆盖整个视口？
【发布时间】：2019-04-06 14:21:18
【问题描述】：

此代码中蓝色 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 再次覆盖新的窗口大小？

【问题讨论】：

它可以从您的 CSS 中按预期工作。视口是窗口的高度，溢出的不是它的一部分
你有溢出，溢出不计入视口高度
假设有一些文本在缩小窗口时溢出。我应该如何解决这种情况，以便 100vh 高度 div 再次覆盖新的窗口大小？
你能分享一个真实的用例吗？因为在这种情况下，我只需为两者设置相同的高度
@NeerajKumar 我明白你现在得到了什么。您需要在侧边栏和主要内容周围有一个包装器，然后您可以将侧边栏设置为 100% 的高度，它将跟随您的主要内容在页面下方。我现在正处于一些事情的中间，但我会尝试在这里设置一个快速小提琴。我认为您正在考虑如何设置错误。

标签： html css

【解决方案1】：

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

.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 问题。这个小提琴只是一个例子，但它应该为您提供一个很好的参考框架，让您了解应该如何考虑布局。

【讨论】：

真正有用的答案；谢谢！

【解决方案2】：

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

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

【讨论】：

假设有一些文本在缩小窗口时溢出。我应该如何解决这种情况，以便 100vh 高度 div 再次覆盖新的窗口大小？
如果文本超过容器的新高度，则可以使用溢出：自动；它将创建一个可滚动的容器并且文本不会流出。

【解决方案3】：

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

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

demo here

更多详情请参考CSS Units documentation。

【讨论】：