Make DIV fill remainder of page vertically?

Question

I have a Google Maps app that takes up most of the page. However, I need to reserve the top-most strip of space for a menu bar. How can make the map div automatically fill its vertical space? height: 100% does not work because the top bar will then push the map past the bottom of the page.

+--------------------------------+ |      top bar  (n units tall)   | |================================| |              ^                 | |              |                 | |             div                | |     (100%-n units tall)        | |              |                 | |              v                 | +--------------------------------+ 

Answer 1

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.

Answer 2

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.