首先我们要知道height:100%能生效有两种情况。
- 第一种是父级有显性高度，即写了具体值。当然从html一直往下都赋予
height:100%也是属于这种情况。（html=>body=>…=>父级=>目标元素）。
当然设置
max-height与min-height对height:100%的多数情况是没用的，它们只是设置边界而不是设置具体值。
- 第二种就是自身绝对定位，父级相对定位，脱离文档流。其实原理和上述是一致的。
解决办法：
- 给予显性高度，当然这一办法几乎没用。能写死高度就不会出现这个问题了。
- 无奈的子绝父相，给予父级相对定位，自身绝对定位。
注意：子元素绝对定位是计算父元素的 padding 值的。而传统的height:100%是不计算的。当然使用全局的box-sizing: border-box就不用担心了。
还有一个问题。其实要牵扯到height:100%与height:inherit的不同。那就是父级position:static而子级是position: absolute的时候,子元素已经脱离文档流，它的父级就是最近的定位元素。height:100%的对象就不是它真正的父级了。但是height:inherit就不出现这种问题。
对于现代浏览器来说，有一个更好的解决方案！
现在的浏览器普遍支持vw/vh单位，vw是屏幕的宽度单位，是百分比单位，100vw等价于width:100%。
vh同理，所以height:100%可直接用height:100vh替代，这种方式不会出现失效的情况。