水平滚动条仅出现在页面底部 [英] Horizontal scrollbar only appearing at bottom of page
问题描述
我有一个具有以下HTML结构的页面...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
由于我不愿讨论的原因，.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
还有一个Codepen: http://codepen.io/anon/pen/ocxvs
在此先感谢您的帮助！
这是因为您的文档(body)未被拉伸到视口的整个高度(html)，因此您还需要分配height:100vh删除溢出设置，以免出现两个滚动条(一个在body上，一个在html上).
只需将CSS更改为:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
I have a page with the following HTML structure...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear.
My CSS is as follows:
html {
overflow-x: scroll;
height: 100%;
}
body {
overflow: auto;
}
.wrapper {
min-width: 1100px;
margin: 0 auto;
}
For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main browser frame, above the main browser horizontal scroll area. I want the main horizontal scrollbar of the window to be the one that is available.
Here is a diagram of my problem: http://oi62.tinypic.com/r06m1z.jpg
And a codepen: http://codepen.io/anon/pen/ocxvs
Thanks in advance for any help!
Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).
Simply change your CSS to:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
这篇关于水平滚动条仅出现在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
