CSS div height 100% not working

Issue

div2 is 1000px height because of div4, div5 and div6. I'm not understanding why div3 isn't getting the 100% height, it is 0px height.

<div id="div1" class="center" style="width:1024px; height:auto;">
    <div id="div2" style="float:left; width:100%; height:auto;">
        <div id="div3" style="float:left; width:460px; height:100%; background-image:url(img/bgVictorMonteiro.jpg); background-size:100% auto; background-position:bottom; background-repeat:no-repeat;"></div>
        <div id="div4" style="float:left; width:270px; height:1000px;"></div>
        <div id="div5" style="float:left; width:25px; height:1000px;"></div>
        <div id="div6" style="float:left; width:269px; height:1000px;"></div>
    </div>
</div>

Solution

You could set the height of parent div1 to 1000px and set the children's height to :inherit. Here's an example:

#div1
{
    width:1024px;
    height:1000px;
    background:red;
    overflow:hidden;
}
#div2
{    
    float:left;
    width:100%;
    height:inherit;
    background:yellow;
}
#div3
{    
    float:left;
    width:460px;
    height:inherit;
    background-image:url('http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg');
    background-size:100% 100%;
    background-position:bottom;
    background-repeat:no-repeat;
}

#div4
{
    float:left; 
    width:270px;
    height:inherit;
    background:violet;
}

#div5
{
    float:left;
    width:25px;
    height:inherit;
    background:black;
}

#div6
{
    float:left;
    width:269px;
    height:inherit;
    background:blue;
}

<div id="div1" class="center">
    <div id="div2">
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5" ></div>
        <div id="div6"></div>
    </div>
</div>

It could be a workaround. I hope it helps.

Answered By - vicrec