为什么 body 设置 overflow: hidden 无效?

发布于
2019-02-15

为什么 body 设置 overflow: hidden 无效?

图片描述

html {
    background: #fff;
}
body {
    height: 200px;
    background: #ccc;
    overflow: hidden;
}
.a {
    height: 300px;
    width: 200px;
    background: pink;
}

<body>
    <div class="a"></div>
</body>

css

阅读 4.9k

2 个回答

得票最新

sasa

15215

发布于
2019-02-15

✓ 已被采纳

搬运工
From the CSS 2.2 spec for the overflow property

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.

That is, overflow:hidden set on the body element, is moved to apply to the viewport instead. To avoid that happening, you can set the <html> element to not be overflow:visible.

i.e. add html { overflow:auto; } to the CSS.
https://stackoverflow.com/que...