html 元素和 body 元素有何不同？

Question

I tumbled upon this question here

我不清楚 html 和 body 元素的行为。

看答案， 他把body和html的高度设置为100% 这帮助他解决了他的答案，

这是怎么发生的？ 请帮帮我。

Answer 1

一个问题是html和body默认有height:auto，这很难计算。我的意思是，汽车的 50% 是多少？所以，这些计算失败了。

即使你能知道body的高度，也就是看它渲染后的高度，它仍然和屏幕的高度不一样。示例：

html {background:lime}
body {background:black; color:white}

This is the body

看到了吗？ body 仅高一行。因此，您设置为 height:100% 的 body 的任何子级仍将与其父级一样高。

因此解决方案是将html 和body 都设置为height:100%，这将使它们的高度与窗口相同。