Css 水平滚动条仅出现在页面底部
我有一个具有以下HTML结构的页面Css 水平滚动条仅出现在页面底部,css,scrollbar,overflow,horizontal-scrolling,Css,Scrollbar,Overflow,Horizontal Scrolling,我有一个具有以下HTML结构的页面 <html> ... <body> <div class="wrapper"> ... </div> </body> </html> 出于某种原因,当您垂直向下滚动到页面底部时,显示的唯一水平滚动条是一个,并且它在主浏览器框架内的主浏览器水平滚动区域的上方显示。我希望窗口的主水平滚动条是可用的 以下是我的问题示意图:
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
出于某种原因,当您垂直向下滚动到页面底部时,显示的唯一水平滚动条是一个,并且它在主浏览器框架内的主浏览器水平滚动区域的上方显示。我希望窗口的主水平滚动条是可用的
以下是我的问题示意图:
还有一支密码笔:
提前感谢您的帮助 这是因为您的文档(body
)没有拉伸到视口的整个高度(html
),您需要指定height:100vh
,同时删除溢出设置,这样您就不会出现两个滚动条(一个在body
上,一个在html
上)
只需将CSS更改为:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
一个jsfiddle.net会非常方便:)我在用codepen复制这个问题时遇到了困难,但我刚刚设法做到了,给你:谢谢!这在codepen上非常有效,但在我的实际站点上,所有滚动条现在都消失了(包括垂直)。不幸的是,我无法向您发送指向它的链接。我认为在(相当大的)样式表的某个地方一定有一个rogue
溢出:隐藏的标记!谢谢你的帮助。找到了-我是对的。正文在单独的样式表上有一个溢出:隐藏的标记。再次感谢!:)
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}