想要div铺满全屏，设置height:100%却没有生效

此文为《CSS世界》的读书笔记，书的作者是张鑫旭大佬，人民邮电出版社，2017年12月第一版。

开发遇到的问题

某小白想要在页面插入一个div，然后满屏显示背景图，就写了如下的CSS：

	div {
		width: 100%;            /*这是多余滴*/
		height: 100%;           /*这是无效滴*/
		background: url(bg.jpg); 
	}

然后他发现这个div的高度永远是0，小白顿时茫然了。
那么，为何height:100%无效？
其实，规范中给了答案。如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。一句话总结就是：因为解释成了auto。auto和百分比计算，是得不到高度值的。
‘auto’ * 100/100 = NaN

那么，为何width设置width: 100%却有效
宽度的解释是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS 2.1中是未定义的，也就是说规范没有明确宽度该怎么表示，浏览器可以自己去发挥。根据作者的测试，各个浏览器对宽度的显示都是一致的，因此，就按照包含块的真实的计算值作为百分比计算的基数。

#div1 {
  height: 100px;
  display: inline-block;
  white-space: nowrap;
  background-color: red;
}
#span1 {
  width: 50px;
  background-color: pink;
}
#span2 {
  width: 100%;
  display: inline-block;
  background-color: gray;
}
<div id="div1">
  <span id="span1">2222</span>
  <span id="span2">hello!</span>
</div>

结果如图所示：

解释： 想明白为什么会这么显示要先了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。套用本例就是，先渲染父元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的 width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候， 父元素宽度已经固定，此时的 width:100%就是已经固定好的父元素的宽度。宽度不够怎么 办？溢出就好了，overflow 属性就是为此而生的。

如何让元素支持 height:100%效果

其实从上面的规范可以看出有两种方法：
1、设定显示的高度值，例如，设置height: 600px; 或者设置可以生效的百分比高度

html, body {
  height: 100%;     /**仅仅设置body或者height是无效的/
} 

2、使用绝对定位，此时就会满屏显示背景图

body {
  background: url(bg.jpg); 
}
div {
  height: 100%;
  position: absolute;
}

注意： 绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。
可以访问 http://demo.cssworld.cn/3/2-11.php 看出高度的区别