html - Why isn't this 100% height working? -

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/

why doesn't #test have 100% height?

because body min-height should defined height :

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

forked fiddle -> http://jsfiddle.net/p7vn7vrj/
body min-height percentage min-height of "nothing", because there no height calculate min-height percentage against. therefore #test height same body min-height, not set.

the css hierarchy is

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

and on