如何防止vh单位忽略滚动条？

Question

我正在设计一个带有水平滚动条的页面布局。 我有一些面板以水平顺序具有固定的宽度，这些面板应该具有视口高度。我决定尝试使用vh单位来实现。

.panel { height: 100vh; }

这很好用，直到出现滚动条。问题在于，vh忽略了滚动条使用的高度，因此添加了一个垂直滚动条。

我想从vh的尺寸中减去滚动条的高度；有什么方法可以做到这一点吗？

- Afterlame

---

.panel { height: calc(100vh-17px); } 这样怎么样？我不知道滚动条有多大，也不确定这是否与浏览器/操作系统有关。 - kleinfreund

@kleinfreund 我之前尝试过使用最新版本的Chrome和Safari。两者都给出了“意外的CSS标记：）”的错误提示。而且，正如你之前提到的那样，仍然存在未知滚动条高度的问题。 - Afterlame

那么您可能想依赖于Javascript并计算滚动条的实际高度。但我相信您想要一个良好的基于CSS的解决方案，这将是更可取的。是的，我已经谷歌过了，视口单位和calc（）目前并不真正起作用。 - kleinfreund

VH单位在技术上正常工作，它们填充了视口的整个高度。为避免滚动条问题，您有两个选项：#1使用100％的高度（可能很麻烦），或者#3使用calc减去滚动条的宽度（10px）。例如：calc（100vw-10px），但是这种解决方案在Webkit中不起作用。 - user1076821

您的使用案例在此处已讨论并解决：http://lists.w3.org/Archives/Public/www-style/2013Jan/0616.html。如果您在根元素上定义overflow-x:scroll;，这将从视口高度中减去滚动条的高度。水平方向也可以这样做，但是目前这种方法仅在Firefox中得到支持，这是一个严重的问题。 - Matt Kieran

Answer 1

您可以使用具有overflow-y: hidden的父元素来确保您不会得到垂直滚动条，然后安全地在其内部使用100vh。这是假设您实际上需要某些原因的100vh，而不仅仅是需要填充垂直空间。

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

- mirichan

---

我认为使用overflow:hidden来覆盖元素没有什么好处。你只需要将#container的高度设置为100%，而不是100vh即可。 - a.s.panchenko

我同意100vh是不必要的，并在我的回答中暗示了这一点，但问题是关于视窗单位的。 - mirichan