HTML/CSS: stretching height <div> layout

Question

<div style="width: 800px; height: 600px"> 
    <div style="height: 100px"> 
        top fixed-height row
    </div> 
    <div style="???"> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div> 

What's the standard way to create two-row layout without javascript where the top one is fixed-size and the bottom one stretches and fits to its parent div?

• I would like both rows' styles are independent. I found a couple of solutions here, but if I change the height of the top row, the bottom row's style (e.g. margin) need to be changed along with it.

• I don't need to support old browsers. If it's standard, it's just okay.

Thanks!

Answer 1

You can use display property in CSS to fix this.

working EXAMPLE

HTML

<div id="a" style="width: 300px; height: 200px"> 
    <div id="b" style="height: 55%"> 
        top fixed-height row
    </div> 
    <div id="c" style=""> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div> ​

CSS

#a
{
    border: 1px solid black;
    display:table;
}
#b
{
    background-color:red;
    display:table-row;
}
#c
{
    background-color:green;
    display:table-row;
}​