块级子元素无法实现 height100% 的原因

为什么height:100%不起作用呢？

根据W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度

通常，设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。为什么高度不会这样呢？

为了理解为什么不会，需要理解浏览器是如何计算高度和宽度的。

浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度，如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样

浏览器计算高度的方式：

1.浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。
2.父元素的高度只是一个缺省值(指在无决策者干预情况下，对于决策或应用软件、计算机程序的系统参数的自动选择。默认选项的设计可以在用户不须决策的状况下就可以基础地使用上述的软件与程序。)： height: auto; 当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined(未阐明的，未限定的)的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

所以：父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。

——————————————————————————————————————————————————

结语：若文章有错误的地方，烦请在评论区指出。当然，我会不定时的重新编辑写过的文章，查错及优化，希望能将最好的文章展现给读者。