為什么這個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;
}

分叉的小提琴-> http://jsfiddle.net/p7vn7vrj/
body min-height百分比是“沒有”的min-height ，因為沒有height可用來計算min-height百分比。 因此， #test height將與body min-height相同，未設置。

CSS層次結構是

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

等等