html - 为什么这个高度为 100vh 的 div 没有覆盖整个视口(viewport)？

Question

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

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

Viewport height 只是表示元素的高度将是视口(viewport)的百分比。视口(viewport)是您查看页面的窗口。因此，如果它是 1920x1080 屏幕，视口(viewport)高度将为 1080px 或任何浏览器窗口，如果屏幕底部有工具栏，它可能会更小。你遇到的问题是，如果你想让侧边栏跟随页面的主要内容，你需要忽略视口(viewport)并在它们周围都有一个包装器，如下所示:

.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>

话虽如此，您可能想查看以下 fiddle Here .我已经使这个 fiddle 响应移动屏幕，因此您可能需要将输出窗口的大小调整得更大才能查看侧边栏布局。问题是您绝对在 divs 之外定位元素和修复元素，这是不好的做法。在您上面评论的示例中，您会遇到许多布局和 z-index 问题。 This fiddle 只是一个示例，但它应该为您提供一个关于如何考虑布局的良好引用框架。