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%。如下图所示。
|
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 以其令人困惑和迟钝的措辞而闻名。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269248.html
