overflow：隐藏在div和body上，行为不同 [英] overflow: hidden on div and body, different behavior
问题描述
给定此html：
<body>
<div id="a"></div>
<div id="b"></div>
</body>
我想要 #b 剩余的垂直空间的容器块，我开始这样：
I want #b to fill all the remaining vertical space of its container block, I began with this:
body {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
所以 #b 是100％的高度，这意味着它是它的父容器块的高度，这是 500px ，问题是 overflow：hidden ; 似乎无效， #b 未剪裁。
So #b is 100% height, which means that it is taking the height of its parent container block, which is 500px, the problem is that the overflow: hidden; seems to not work, #b is not clipped.
如果我用与相同属性的另一个div换行上面我有想要的结果： #a 和 #b body
On the other hand, if I wrap #a and #b with another div with the same properties as body above I have the desired result:
#wrap {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
这个html当然是：
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
我的问题是为什么 div c $ c> body 似乎有不同的行为与相同的属性？
My question is why div and body seems to have different behaviors with the same properties? and is there any way to get the same effect without the wrapper?
为了说明这个问题，我创建了两个jsFiddles：
To illustrate the question I have created two jsFiddles:
js使用body标签作为包装器： http://jsfiddle.net/3AMtG/
jsFiddle with body tag as wrapper: http://jsfiddle.net/3AMtG/
jsFiddle使用div标签作为包装器： http://jsfiddle.net/2QWn3 /
jsFiddle with div tag as wrapper: http://jsfiddle.net/2QWn3/
具有相同属性的两个jsFiddles会产生不同的结果。为什么？
Two jsFiddles with the same properties yield different results. Why is that?
推荐答案
溢出属性具有特定的特定行为到HTML的 html 和 body 元素，它们在 CSS2.1规范。这些特殊情况适用于在正常情况下适应整个页面上的更改溢出设置，因此作者只需要在 html 或 body ，而不是两者。
The overflow property has certain special behaviors specific to HTML's html and body elements, which are described in the CSS2.1 spec. These special cases are in place to accommodate changing overflow settings on the entire page in normal circumstances so authors simply need to set it on either html or body, but not both.
在这种情况下，当您应用 overflow：hidden body ，它实际上影响视口而不是 body （你可以通过调整预览窗格大小来缩短视图 - 预览窗格本身不会出现滚动条）。这会导致 #b 正常溢出正文，即使你给它一个固定的高度小于 #a 和 #b 。
In this case, when you apply overflow: hidden to body, it actually affects the viewport instead of body (you can see this by resizing the preview pane to make it shorter — no scrollbars will appear on the preview pane itself). This causes #b to overflow the body normally even though you give it a fixed height that's less than the sum of #a and #b. In other words, it's as though you never set it on the body in the first place.
如果你设置 overflow 到可见在 html 上，但是，这导致视口使用给定的值 html 而不是 body ，从而使 body 上的声明不受影响，并允许它的行为方式与包装器相同：
If you set overflow to something other than visible on html, though, this causes the viewport to use the value given to html instead of body, thereby leaving the declaration on body unaffected and allowing it to behave the same way as the wrapper:
html {
overflow: auto;
}
body {
height: 500px;
width: 500px;
overflow: hidden;
}
这篇关于overflow：隐藏在div和body上，行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
