html - 为什么这个 100% 的高度不起作用？

Question

CSS

html { height: 100%; }

body { min-height: 100%; margin: 0; }

#test { height: 100%;  background: red; width: 50px; }

HTML

<div id="test">test</div>

http://jsfiddle.net/k176a1xc/1/

为什么#test 的高度不是 100%？

Answer 1

因为正文 min-height应定义为 height :

body {
    height: 100%;
    margin: 0;
}

fork fiddle -> http://jsfiddle.net/p7vn7vrj/
body min-height百分比是 min-height “无”，因为没有 height计算min-height百分比反对。因此#test height将与正文相同 min-height , 未设置。

CSS层次结构是

height 
   min-height
   max-height
     height (child)
       min-height
       max-height

等等