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;
}

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

1 个答案: