我正在使用带有水平滚动条的页面布局.
我有一些具有水平顺序的固定宽度的面板,它们都应该具有视口高度.我决定测试这个单位.
我有一些具有水平顺序的固定宽度的面板,它们都应该具有视口高度.我决定测试这个单位.
.panel { height: 100vh; }
这是正常的,直到我得到一个滚动条.
问题是,vh忽略了滚动条使用的高度,因此添加了一个垂直滚动条.
我想从vh的测量中减去滚动条的高度;有什么办法吗？
解决方法
您可以使用带有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;
}
