为什么有人会在<html>标签上写overflow:hidden？

Question

8

我正在阅读一个模板的源代码，我得到了代码。

<html class="js" style="overflow: hidden">

我的问题是为什么有人会在html标签上应用overflow:hidden，它会带来什么好处。

- user3050499

2

我看不到规则，但可能是清除浮动。 - Dennis Fagan

@DennisFagan，你能用一个fiddle来解释一下吗？ - user3050499

我添加了一个带有fiddle的答案。 - Dennis Fagan

@DennisFagan 请查看评论。 - user3050499

为什么不将相同的属性添加到body标签中呢？将其添加到HTML标签中有什么优势？ - theprogrammer

4个回答

3

很可能会移除所有滚动条。

当你设置overflow: hidden时，超出元素范围的内容将被隐藏。如果将其附加到html元素上，则会隐藏屏幕外的所有内容。浏览器随后会发现由于屏幕之外的所有内容都被隐藏了，因此没有需要滚动的地方，所以它会隐藏滚动条。

想要浏览器看起来干净而完整的模板，如果他们认为没有什么用户需要滚动的，则会移除滚动条。

- MattDiamant

为什么不将相同的属性添加到body标签中呢？通过将它添加到HTML标签中，您可以获得什么优势？ - theprogrammer

1

据我所知，将其放在<body>标签上而不是<html>标签上对你没有任何好处。<html>标签更加显眼，因为它是最顶层的元素，但是<body>标签更有可能成为最顶层可用的元素来放置此内容。这时就看个人喜好了。 - MattDiamant

2

overflow:hidden可以用来清除浮动 http://jsfiddle.net/PRwVT/1/ 添加

.wrapper {
    border: 1px solid;
    padding: 3px;
    background: red;
    overflow: hidden;
}

尝试覆盖那个fiddle中的.wrapper类，你就会明白我的意思了。话虽如此，唯一可能具有浮动属性并且是html元素的直接子元素的标签是body标签。

- Dennis Fagan

与我的问题无关。我提到了为什么有人会将其应用于HTML元素，而不是包装器。我知道在这种情况下它如何工作。 - user3050499

1

HTML元素包裹着所有内容。Fiddle不允许您编辑HTML元素。我同意这很奇怪。 - Dennis Fagan

1

这将禁用页面滚动。例如，当您在页面上打开覆盖层并希望能够滚动覆盖层内容但同时不滚动其后面的页面时。

在这种情况下，您可以在单击打开模态框的按钮时向html元素添加一个类，该类设置'overflow:hidden'，然后在单击模态框上的关闭按钮时删除该类。

为使此方法有效，模态框必须具有固定位置。

- ezeikel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scrblnrd3 · Accepted Answer

当你有动态、响应式的内容时，你会使用overflow:hidden，至少这是我使用它的原因。例如，如果你有一个页面的内容在缩小页面时高度增加，你可能想要隐藏除了div正常高度之外的任何不可见内容。