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

老王 • • 问答 • 330 阅读

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：

html {
background-color: white;
}

body {
width: 50%;
background-color: gray;
margin: 0 auto;

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

/* position: absolute;
left: 22%; */
}
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

但是，如果我将定位更改为 absolute，即如果我取消注释以下内容：

position: absolute;
left: 22%;

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

enter

这是正常行为吗？ <body> 元素在布局规则方面的行为是否与任何其他块元素一样，尤其是。关于它的高度？

相关讨论
  • 这个问题可能会对您有所帮助：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 并根据其父级构建其大小。

以上是关于css：静态定位正常布局中body元素的高度是否默认不是其容器的100%？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>