css - 如何防止 vh-units 忽略滚动条？

Question

我正在处理带有水平滚动条的页面布局。我有一些水平顺序固定宽度的面板，它们都应该具有视口高度。我决定测试这个vh单元来做到这一点。

.panel { height: 100vh; }

这工作正常，直到我得到一个滚动条。问题是，它vh忽略了滚动条使用的高度，因此添加了一个垂直滚动条。

我想从测量值中减去滚动条的高度vh；有什么办法吗？

Answer 1

您可以使用带有 overflow-y: hidden 的父元素，以确保您不会获得垂直滚动条，然后在其中安全地使用 100vh。这是假设您出于某种原因确实需要 100vh 并且不只是需要填充垂直空间。

HTML

<div id="main">
  <div id="container"></div>
</div>

CSS

#main {
  width:200vw;
  height:100%;
  background: red;
  position: absolute;
  overflow-y: hidden;
}

#container {
  height: 100vh;
  width:10px;
  background: blue;
}