html - CSS nested div height 100% doesn't work -

html - CSS nested div height 100% doesn't work -

i hope can help me problem. have construction this

<div id="div1" style="height:auto"> <div id="div2" style="height:100%;"> <div id="div3" style="min-height:100%;"></div> <div id="div4" style="height:100%;"></div> </div> </div>

also set in css file

html,body { height: 100%; }

problem neither div3 nor div4 have expected height of 100%, check size of first 2 divs firbug , ok, filling whole screen.

sorry bad english, hope understand question :)

have @ this. when using percentage, each div affected height of it's parent.

in illustration html,body has height of 100% , percentage of each div kid relative it's parent. note how each div half size of it's parent div, each step shrinks half size.

updated percentage example

simple example

html

<div> <div> <div> <div></div> </div> </div> </div>

css

html, body { height: 100%; } div { height: 100%; background: #f00; } div div { background: #ff0; height: 50%; } div div div { background: #000; height: 50%; } div div div div { background: #f30; height: 50%; }

html css height