为什么这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>

benchmark

为什么没有#test有100％的身高？

Answer 1

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

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

分叉小提琴 - ＆gt;的 http://jsfiddle.net/p7vn7vrj/
body min-height百分比是min-height＆＃34;没有＆＃34;，因为没有height来计算min-height百分比。因此，#test height将与未设置的正文min-height相同。

CSS层次结构是

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

等等