Fixed height container div, flexible height content div

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 (eg 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.

Answer 2

Since you can not set the footer height (as you wrote)
try this:

#container{
    background : red;
    height:800px;
    min-height:800px
}
#header{
    background : blue;
}
#content{
    background : yellow;
    height:100%
}
#footer{
    background : green;
    //position:absolute;
    position:fixed;
    bottom:0;
    width:100%;
}

and the jsfiddle: http://jsfiddle.net/AJtxy/1/

Answer 3

如果您使用javascript设置其他div的高度，则可以使用jquery来获取窗口的高度，减去其他2个div和voila的高度，您得到的是正确的数量...这应该有助于您一个想法http://api.jquery.com/height/