CSS div height 100% not working

Question

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>

Answer 1

Using a percentage based height relies on an explicit height value being set on the parent element:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

Content height: the 'height' property (http://www.w3.org/TR/CSS21/visudet.html#the-height-property)

In this case the parent element is #div2 which has height: auto;. This means that its height depends on the height of its content and is not explicitly declared.

If you were to apply the height explicitly to #div2 (e.g. height: 1000px;) then using height: 100%; on #div3 would work.

#div1 {
    width:1024px;
    height:auto;
}
#div2 {
    float:left;
    width:100%;
    height:1000px;
}
#div3 {
    float:left;
    width:460px;
    height:100%;
    background-color: red;
}
#div4 {
    float:left;
    width:270px;
    height:1000px;
    background-color: green;
}
#div5 {
    float:left;
    width:25px;
    height:1000px;
    background-color: blue;
}
#div6 {
    float:left;
    width:269px;
    height:1000px;
    background-color: orange;
}

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

One possible way of ensuring that #div3 uses the full height without setting it explicitly on #div2 is to use flexbox.

#div1 {
    width:1024px;
    height:auto;
}
#div2 {
    float:left;
    width:100%;
    height:auto;
    display: flex;
}
#div3 {
    width:460px;
    background-color: red;
}
#div4 {
    width:270px;
    height:1000px;
    background-color: green;
}
#div5 {
    width:25px;
    height:1000px;
    background-color: blue;
}
#div6 {
    width:269px;
    height:1000px;
    background-color: orange;
}

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