Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/loops/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/macos/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 水平滚动条仅出现在页面底部_Css_Scrollbar_Overflow_Horizontal Scrolling - Fatal编程技术网

Css 水平滚动条仅出现在页面底部

Css 水平滚动条仅出现在页面底部,css,scrollbar,overflow,horizontal-scrolling,Css,Scrollbar,Overflow,Horizontal Scrolling,我有一个具有以下HTML结构的页面 <html> ... <body> <div class="wrapper"> ... </div> </body> </html> 出于某种原因,当您垂直向下滚动到页面底部时,显示的唯一水平滚动条是一个,并且它在主浏览器框架内的主浏览器水平滚动区域的上方显示。我希望窗口的主水平滚动条是可用的 以下是我的问题示意图:

我有一个具有以下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;
}