Question

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

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

.wrapper被设置为min-width: 1100px，原因我不会进入。{1}}因此，当浏览器调整大小小于1100px时，我想要一个水平滚动条出现。

我的CSS如下：

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

body {
    overflow: auto;
}

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

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

提前感谢您的帮助！

Answer 1

因为您的文档（body）未被拉伸到视口的整个高度（html），您需要指定height:100vh，同时删除溢出设置，这样您就不会得到出现2个滚动条（body上的一个滚动条在html上）。

只需将您的CSS更改为：

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