我正在使用带有水平滚动条的页面布局.
我有一些具有水平顺序的固定宽度的面板,它们都应该具有视口高度.我决定测试这个单位.
我有一些具有水平顺序的固定宽度的面板,它们都应该具有视口高度.我决定测试这个单位.
- .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;
- }
