你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同

如果父元素height为auto，只要子元素在文档流中，其百分比值完全失效了，因为 'auto' * 100/100 = NaN

百分比高度生效方式一：设定显式的高度值

例如，设置height:600px，或者可以生效的百分比值高度。

html, body {
　 height: 100%;
}

仅仅设置body也是不行的，因为此时的body也没有具体的高度值

百分比高度生效方式二：使用绝对定位

• 绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内
  

• 非绝对定位元素则是相对于content box计算的。
  

范例详见 https://demo.cssworld.cn/3/2-11.php

div {
　 height: 100%;
　 position: absolute;
}

此时的height:100%会有计算值，即使祖先元素的height计算为auto也是如此。

实用范例——“图片左右半区点击分别上一张图下一张图效果”的布局

https://demo.cssworld.cn/3/2-12.php