父元素css设置最小高度后，子元素的高度100%失效

Question

父及元素 div 设置 min-height:400px;
子元素 div设置 height:100%；
奇怪的是子元素的100%并没有把400px继承过来，100%的高度设置失效

<div style="min-height:400px; background:#000;" class="a1">
   <div style="height:100%; background:#fff;" class="b1"></div>
</div>

子元素的b1 并没有基础 父元素a1的 400高度 这是为什么呢

Answer 1

你父级元素 div 设置 min-height:400px;
子元素 div设置 height:100%；只有当父级元素满足min-height:400px;条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。

Answer 2

子元素 height:100%,会查看该元素的父元素的高，因为父元素只设置的min-height 浏览器认为没有。会向上查找。很显然上层也没有，所以返回0；

Answer 3

给父元素加绝对定位，子元素加相对定位

Answer 4

min-height 是在 height 计算之后再套用的。在计算容器 height 时，默认值为 auto，故由其内容决定。这种情况下子元素百分比的 height 都会当作 auto 处理。例子中算出子元素高度 0，于是容器得到 height 为 0，比 min-height 小，所以最后容器应用 min-height。

参考 CSS2 的 10.5 和 10.7。