Make DIV fill remainder of page vertically?
You could use absolute positioning.
HTML
<div id="content">
<div id="header">
Header
</div>
This is where the content starts.
</div>
CSS
BODY
{
margin: 0;
padding: 0;
}
#content
{
border: 3px solid #971111;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #DDD;
padding-top: 85px;
}
#header
{
border: 2px solid #279895;
background-color: #FFF;
height: 75px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
By positioning #content
absolutely and specifying the top, right, bottom, and left properties, you get a div taking up the entire viewport.
Then you set padding-top
on #content
to be >= the height of #header
.
Finally, place #header
inside #content
and position it absolutely (specifying top, left, right, and the height).
I'm not sure how browser friendly this is. Check out this article at A List Apart for more information.
The way to do it, apparently, is to use JavaScript to monitor the onload and onresize events and programmatically resize the filling div like so:
Using jQuery:
function resize() {
$("#bottom").height($(document).height() - $('#top').height());
}
Using plain JavaScript:
function resize() {
document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}
Edit: and then bind these to the window
object.
Another solution not given uses CSS3 rather than javascript. There is a calc() function now which can be used to do the same thing:
HTML
<div id="content">
<div id="header">
Header
</div>
<div id="bottom">
Bottom
</div>
</div>
CSS3
#content {
height: 300px;
border-style: solid;
border-color: blue;
box-sizing: border-box;
}
#header {
background-color: red;
height: 30px;
}
#bottom {
height: calc(100% - 30px);
background-color: green;
}
Here is the jsfiddle
You might also want to look into using the box-sizing: border-box
style for interior divs since this can get rid of problems of padding and borders poking outside of parent divs.