关于css：静态定位正常布局中body元素的高度是否默认不是其容器的100%？


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 {
width: 50%;
background-color: gray;
margin: 0 auto;

min-height: 100%;
height: 100%;

/* position: absolute;
left: 22%; */
}
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%。如下图所示。

enter

1
2
position: absolute;
left: 22%;

当然，它遵守 height: 100%; min-height: 100% 规则。然后它会填满浏览器的整个高度，如下所示：

enter

相关讨论

TL;DR：是的，这是正常行为。

但是。

曾几何时，有一个较旧的标准，默认情况下 body 确实具有视口的高度。很久以前。

另外，HTML 的一些晦涩的特性可能会造成混淆。如果不设置html元素的background-color属性，body的背景会被html"继承"，让整个窗口都有这个背景，看起来就像body 占据了整个窗口，事实并非如此！

相关讨论

当它是静态的时，它的父级是 html，当你在这种情况下使用静态定位时，它会在父级内思考。 html 默认情况下，因为任何其他块都有 height: auto 所以如果你将它更改为 100%，它就会变成你所期望的。

body 有一个父 html 并根据其父级构建其大小。