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


我正在使用水平滚动条进行页面布局。 我有一些水平顺序固定宽度的面板,它们都应该具有视口高度。我决定测试一下 vh 这样做的单位。

.panel { height: 100vh; }

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

我想从测量值中减去滚动条的高度 vh;有没有办法做到这一点?


18
2017-10-29 20:02


起源


怎么样 .panel { height: calc(100vh-17px); }。我不知道滚动条有多大,以及这是否依赖于浏览器/操作系统。 - kleinfreund
@kleinfreund我之前尝试过最新的Chrome和Safari版本。两个都给了我 Unexpected CSS token: )。而且,如前所述,未知滚动条高度会出现问题。 - Afterlame
然后你可能想依靠Javascript并计算 实际 滚动条的高度。但我确信你想要一个好的基于CSS的解决方案,这将是更好的选择。是的,我google了,视口单元和calc()并没有真正起作用。 - kleinfreund
是的,我想尽可能避免使用JS。作为基于CSS的解决方案 html, body, .content { height: 100%; } 似乎现在工作,但使用的任何好的解决方案 vh 不胜感激。 - Afterlame
您的用例在此处进行了讨论和解决: lists.w3.org/Archives/Public/www-style/2013Jan/0616.html。如果你定义 overflow-x: scroll; 在根元素上,这将从视口高度中扣除滚动条高度。它也可以横向工作,但是这个问题的大问题是它目前只支持Firefox。 - Matt Kieran


答案:


您可以使用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;
}

5
2017-10-16 02:44



我没有看到使用溢出隐藏的封面的专业人士。然后你可以设置高度:100%到#container,而不是100vh。 - a.s.panchenko
我同意100vh是不必要的,并在我的回答中暗示,但问题是关于视口单元的具体。 - mirichan