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

【问题标题】：Horizontal scrollbar only appearing at bottom of page水平滚动条仅出现在页面底部
【发布时间】：2014-10-01 18:02:50
【问题描述】：

我有一个具有以下 HTML 结构的页面...

<html>
    ...
    <body>
        <div class="wrapper">
        ...
        </div>
    </body>
</html>

.wrapper 设置为min-width: 1100px，原因我不会详细说明。因此，当浏览器调整为小于 1100 像素时，我希望出现一个水平滚动条。

我的 CSS 如下：

html {
    overflow-x: scroll;
    height: 100%;
}

body {
    overflow: auto;
}

.wrapper {
    min-width: 1100px;
    margin: 0 auto;
}

由于某种原因，唯一显示的水平滚动条是当您垂直向下滚动到页面底部时，它出现在主浏览器框架的“内部”，位于主浏览器水平滚动区域上方。我希望窗口的主水平滚动条是可用的。

提前感谢您的帮助！

【问题讨论】：

【解决方案1】：

这是因为您的文档 (body) 没有拉伸到视口的完整高度 (html)，您需要分配 height:100vh，同时删除您的溢出设置，这样您就不会出现 2 个滚动条（一个在body 一个在html)。

只需将您的 CSS 更改为：

html,body{
  height:100vh;
  width:100vw;
  margin: 0;
  padding: 0;
}

【讨论】：

这在 codepen 上运行良好，但在我的实际站点上，所有滚动条现在都消失了（包括垂直）。不幸的是，我无法向您发送它的链接。我认为在（相当大的）样式表中某处必须有一个流氓overflow: hidden 标签！感谢您的帮助。
找到了——我是对的。正文在单独的样式表上有一个overflow: hidden 标记。再次感谢！ :)