我有一个具有以下 HTML 结构的页面...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
The .wrapper被设置为min-width: 1100px至于原因我就不多说了。因此，当浏览器大小调整为小于 1100px 时，我希望出现水平滚动条。
我的CSS如下：
html {
overflow-x: scroll;
height: 100%;
}
body {
overflow: auto;
}
.wrapper {
min-width: 1100px;
margin: 0 auto;
}
由于某种原因，唯一显示的水平滚动条是当您垂直向下滚动到页面底部时显示的水平滚动条，并且它似乎在主浏览器框架“内”，位于主浏览器水平滚动区域上方。我希望窗口的主水平滚动条成为可用的。
这是我的问题的图表：http://oi62.tinypic.com/r06m1z.jpg http://oi62.tinypic.com/r06m1z.jpg
还有一个代码笔：http://codepen.io/anon/pen/ocxvs http://codepen.io/anon/pen/ocxvs
预先感谢您的任何帮助！
这是因为你的文档（body) 不会拉伸到视口的整个高度 (html），你需要分配height:100vh，还要删除溢出设置，这样就不会出现 2 个滚动条（一个在body one on html).
只需将 CSS 更改为：
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
