Is the body element’s height not 100% of its container by default in the static positioning normal layout?
到目前为止，我一直假设默认情况下，根据正常的布局行为，即使设置了 position: static，<body> 元素也会填充容器 <html> 元素高度的 100%。
然而，一个简单的实验证明我的假设是错误的，我很震惊。
我明白，在正常的布局行为中，块元素的高度是有弹性的并且可以拉伸以填充它们的全部内容。但是，出于某种原因，我认为这不适用于 <body> 元素。
所以，在我的简单实验中，我有以下 HTML：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html {
background-color: white; } body { min-height: 100%; /* position: absolute; |
|
1
2 3 4 5 6 7 8 9 |
Nice sounds
<p>Zoo zoo zoo</p> <p>Koo koo koo</p> <p>Boo boo boo</p> <p>Poo poo poo</p> |
如果我将 position: absolute; 保留为刚才的注释，那么默认情况下，在静态布局中，body 的行为与任何其他块元素一样，并且仅与填充其内容一样高，忽略规则 height: 100%; 和 min-height: 100%。如下图所示。
但是，如果我将定位更改为 absolute，即如果我取消注释以下内容：
|
1
2 |
position: absolute;
left: 22%; |
当然，它遵守 height: 100%; min-height: 100% 规则。然后它会填满浏览器的整个高度，如下所示：
这是正常行为吗？ 元素在布局规则方面的行为是否与任何其他块元素一样，尤其是。关于它的高度？
- 这个问题可能会对您有所帮助：stackoverflow.com/questions/31893330/…
- height 100% 继承自其父级，而 <html> 没有固有高度，只有其父级 viewport 有。 position: absolute 元素将视口作为其包含块，这就是 height: 100% 在那里工作的原因。
- @TylerH：你说，”一个位置：绝对元素将视口作为它的包含块……”。但是，我读到 position 为 absolute 的元素的默认定位上下文是 <html> 元素。 (developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/…)
- @WaterCoolrv2 抱歉，我在考虑 position: fixed，它是将视口作为其包含块的那个，而不是 position: absolute;。可能很难记住，因为 position: fixed 和 position: absolute(以及当前 position: sticky，虽然可能不会持续很长时间)都被认为是”绝对定位”…… W3C 以其令人困惑和迟钝的措辞而闻名。
TL;DR：是的，这是正常行为。
但是。
曾几何时，有一个较旧的标准，默认情况下 body 确实具有视口的高度。很久以前。
另外，HTML 的一些晦涩的特性可能会造成混淆。如果不设置html元素的background-color属性，body的背景会被html”继承”，让整个窗口都有这个背景，看起来就像body 占据了整个窗口，事实并非如此！
- 关于 <html> 继承 <body> 元素的背景颜色的漂亮评论。那是我所做的另一个观察，它实际上让我开始研究这个特定的例子。所以我也特意为身体元素采用了不同的颜色来测试它。非常感谢。
当它是静态的时，它的父级是 html，当你在这种情况下使用静态定位时，它会在父级内思考。 html 默认情况下，因为任何其他块都有 height: auto 所以如果你将它更改为 100%，它就会变成你所期望的。
body 有一个父 html 并根据其父级构建其大小。
来源：https://www.codenong.com/50240214/
