Question

I have a html code like this:

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

div#container’s height is fixed (e.g 800px).
div#footer and div#header’s size are not known at the beginning (to be set via Javascript).

I want div#content to take up 100% of the remaining height.

Can it be done using CSS?

Answer 1

For this type of functionality you can use display:table for this. Write like this:

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:100px;}

.content{background:blue}

.footer{background:green; height:100px;}

Check this http://jsfiddle.net/Rvbk4/

Note: it’s work till IE8 & above.