CODEWITHSUNDEEP
htmlcss
Lucas
Lucas

Reputation: 174

Fixed height container div, flexible height content div

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?

Upvotes: 1

Views: 10164

Answers (3)

Izack
Izack

Reputation: 843

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/

Upvotes: 0

ikoderuk
ikoderuk

Reputation: 154

If you are setting the height of other divs with javascript, you can use jquery to get the height of the window, subtract the heights of the other 2 divs and voila, you are left with the correct amount... This should help give you an idea http://api.jquery.com/height/

Upvotes: 0

sandeep
sandeep

Reputation: 92813

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.

Upvotes: 1

Related Questions