给body设置高度

Posted 2021-02-11 melodysblog

今天做一个小demo，需要给body设置高度为100%，然鹅发现只设置body的height不可行，需，html,body{height:100%;}
为何呢？
一个容器的height是从上一级继承而来的，html{height:100%}中设置的html的高度是相对于浏览器来说，而body中的高度又从html中继承，指的是页面的高度。

在查资料时，也发现比较有趣的一点：
当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。
一旦html标签含有背景色，则body的背景色变成了正常的body标签自己的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。
简单的说就是，html优先于body标签，浏览器按html>body的顺序提取其设置的背景样式作为浏览器的背景，也就是用户能看到的背景。