如何防止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;
}