“溢出：隐藏；”在 PC 上被 Chrome 忽略答案

【问题标题】："overflow: hidden;" Ignored by Chrome on PC“溢出：隐藏；”在 PC 上被 Chrome 忽略
【发布时间】：2014-10-26 22:46:55
【问题描述】：

有人可以运行这个吗？

<html>

    <body style="overflow: hidden;">

        top

        <div style="background-color: red; height: 2000px;"></div>

        bottom

    </body>

</html>

在 Windows 上使用 Chrome 版本 36.0.1985.143 m，我仍然可以滚动。在 Mac OS X、Firefox 和 IE11 上使用 Chrome，我不能。

【问题讨论】：

如果您不希望页面能够滚动，请尝试使用html {overflow: hidden}。否则，请更好地解释您的问题。
这是我的目标，是的。试过了。遗憾的是没有效果。
在 chrome Version 36.0.1985.143 m 中签入，无法滚动页面。检查链接。 jsbin.com/zolotimofeqe/1
可能是清除缓存解决了你的问题。
Kheema，我查看了您链接的源代码。我对 JS Bin 不熟悉，但是一旦我删除了“

标签： css google-chrome overflow

【解决方案1】：

要解决此问题，您需要为 HTML 和 BODY 定义一个高度。出于某种原因，您还必须删除 HTML 和 BODY 的边距和填充。

body, html {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}

如果没有为这些元素定义高度，您的 div 不会溢出任何东西，这就是我理解 chrome 解释它的方式。

这应该可以解决您遇到的轻微滚动问题。我做的时候效果很好。

祝你好运

【讨论】：

我尝试的第一件事。在我上面的代码示例中，添加这个 CSS 减少了允许的滚动量，但我仍然能够上下“摆动”DIV。此外，我的主要观点是，这似乎是特定于当前 PC 版 Chrome 的无法解释的行为。除了我在其他浏览器中的原始代码示例之外，我不需要做任何事情来防止滚动。 DIV 已经知道它不应该溢出什么。
很抱歉我更新了我的帖子。我忘了补充一下，您显然需要删除边距和填充才能真正摆脱滚动。我还添加了关于我认为它是如何工作的答案。不幸的是，这可能只是一个意外的错误。因此，在回答您的主要观点时，您似乎是绝对正确的； chrome 似乎没有明显的原因以这种方式行事。诡异的。不管怎样，我希望这个解决方法对你有用。祝你好运！
我将它与overflow-x: hidden; 一起使用，它在网站页脚之后留下了一个奇怪的冗长空白。这仅在 Chrome 中发生，而不在 Firefox 中发生。我建议找到其他方法来隐藏溢出，也许直接在溢出的元素上（不是 html 或 body）。