Html 机械师：为什么要用3个高度：100%的标签来制作背景填充屏幕？

我试图学习一些基本的技巧，解释为什么需要3个

高度：100%

标签才能用背景图像填充屏幕。凭直觉，我理解为什么

.bg

需要

高度：100%

或者

高度：100vh

但是我不明白为什么

BODY

标签需要

高度：100%

，我尤其不明白

HTML

标签为什么也需要它。如果删除这三行中的任何一行，效果将停止工作。规范中有什么解释吗？我找不到它

这是我的

html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
填充：0；
}
.bg{
身高：100%；
背景图片：url(https://placehold.it/600x600);
背景位置：中心；
背景尺寸：封面；
}

.bg div位于主体和html标记中。因为它的高度：100%填充其父级的高度，所以父级标记、html和正文也必须是完整高度：100%。如果不是，则即使.bg div填充高度为100%，100%也来自非全屏高度的父级，因此.bg只能填充父级的任何高度。

该.bg div位于主体和html标记内。因为它的高度：100%填充其父级的高度，所以父级标记、html和正文也必须是完整高度：100%。如果不是，那么即使.bg div是填充高度：100%，那100%来自一个不是全屏高度的父级，因此.bg只能填充父级的任何高度。

嗨，Fran，你是怎么做的？这有助于将代码保留在页面上。工具栏中有一个snippet按钮，它会显示一个UI，类似于JSFIDLE。嗨，Fran，你是如何完成这项了不起的编辑的？这有助于将代码保留在页面上。工具栏中有一个snippet按钮，它会显示一个UI，类似于JSFIDLE。因此

HTML

和

BODY

与任何其他

DIV

一样，都可以进行下拉。有趣。我认为它们是一种惰性元素。尝试将HTML或BODY设置为50%，你会看到div的高度占了100%，但BODY/HTML只占屏幕的一半。@DR01D我不知道你说的惰性是什么意思，但它们只有它里面的内容那么高（假设内容没有从文档流中拉出）你唯一的内容就是两个空div@BSMP：我假设惰性意味着固定在100%视口高度或其他位置。这实际上是怪癖模式下的情况，因此他们最初的直觉并不遥远。@DR01D:页面呈现是根据CSS定义的，因此必须为每个元素定义CSS布局，包括根元素html。但就内容高度而言，html或正文没有特殊的布局规则，这意味着它们的行为就像一个普通的div。也可以像其他任何

div

一样查看

html

和

body

的快照。有趣。我认为它们是一种惰性元素。尝试将HTML或BODY设置为50%，你会看到div的高度占了100%，但BODY/HTML只占屏幕的一半。@DR01D我不知道你说的惰性是什么意思，但它们只有它里面的内容那么高（假设内容没有从文档流中拉出）你唯一的内容就是两个空div@BSMP：我假设惰性意味着固定在100%视口高度或其他位置。这实际上是怪癖模式下的情况，因此他们最初的直觉并不遥远。@DR01D:页面呈现是根据CSS定义的，因此必须为每个元素定义CSS布局，包括根元素html。但就内容高度而言，html或正文没有特殊的布局规则，这意味着它们的行为就像一个普通的div