CSS嵌套的div高度100％不起作用

Question

I hope that someone can help me about this problem. I have structure like 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 I put in my css file

html,body
{
  height: 100%;
}

Problem is that neither Div3 nor Div4 have the expected height of 100%, I check size of first two divs with firbug and they are ok, filling the whole screen.

Sorry for my bad English, I hope that you understand my question :)

Answer 1

First of all write height in inline style

 <div id="Div4" height:100%;"></div>

change to

 <div id="Div4" style="height:100%;"></div>

Answer 2

The key is to set the height of the div with id "Div1" to something other than "auto". Try 100% or a specific value like this

<div id="Div1" style="height:100%;">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" height:100%;"></div>
</div>
</div>

Answer 3

Have a look at this. When using a percentage, each div will be affected by the height of it's parent.

In this example the html,body has a height of 100% and the percentage of each div child is then relative to it's parent. Note how each div is half the size of it's parent div , each step it shrinks by half the size.

Updated with all 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%;
}