HTML/CSS：滚动条出现在 HTML 元素下方答案

【问题标题】：HTML/CSS: scroll bar appears below HTML elementsHTML/CSS：滚动条出现在 HTML 元素下方
【发布时间】：2013-08-07 21:09:15
【问题描述】：

在 Chrome 和 Safari 中，垂直滚动条出现在页面的 HTML 内容下方，如下所示：

我摆弄了::-webkit-scrollbar，但我能得到的最接近的是将滚动条宽度更改为0px。该部分的div是：

.displayContent { min-width:620px; width:100%; height:auto; overflow:hidden; }

这发生在 Safari（但不是 iOS 上的移动版 Safari）和 Chrome 中。火狐没问题。我也尝试过摆弄溢出，但无法得到我想要的结果。

建议？

【问题讨论】：

【解决方案1】：

试试这个 -

html, body { 
    height:100%; 
    width:100%; 
    overflow:auto;
}

【讨论】：

【解决方案2】：

遇到了类似的问题。

问题出在 html 中{}

如果你使用这样的东西

 html {
    height: 100%;
    width: 100%;
    overflow: hidden;
 }

比滚动条上的覆盖效果出现。删除html样式的溢出并将其放入正文样式中，它应该可以工作。

【讨论】：

【解决方案3】：

今天看到这个只是在 Safari 中重现。问题是我有带有以下 CSS 的可滚动元素的子元素（强制 GPU 合成）：

-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0px);

解决方案是将相同的代码添加到容器（带有overflow:auto; 的元素），这会导致浏览器正确绘制所有内容（滚动条覆盖内容）。

【讨论】：