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

Question

我有一个页面,其中包含以下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://codepen.io/anon/pen/ocxvs

在此先感谢您的帮助!

Answer 1

其因您的文档(body)心不是拉伸到视(全高html),您需要分配height:100vh,也因此你没得到2个滚动条出现(一个在删除您的溢出设置body一个上html).

只需将您的CSS更改为:

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