首先我们要知道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
就不出现这种问题。