css height 100%

Question

Why is the second div height not 100px?

Now it is very long...

<div style = "height: 300px;">
    <div style = "height: 300px; background-color: #000;">
        <div style = "height: 200px;">
                 First div
        </div>
        <div style = "height: 100%; background-color: #336699;">
                 Seconf div
        </div>
    </div>
</div>

Answer 1

cos you have 100% not 100px.

Answer 2

Because 100% means "100% of the height of the parent element" and not "100% of the space left in the parent element after everything else has been accounted for"

Answer 3

height: 100%; doesn't fill up the rest of the space, it takes 100% of the parent <div>, which is 300px. Why don't you just use 100px?

Answer 4

It's 100% of height of the parent div -- in this case 300px not 100.

Answer 5

http://www.templatespoint.com/blog/2010/10/div-height-100-percent/

Hope, It will help you.