Make DIV fill remainder of page vertically?

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)        |
|              |                 |
|        开发者_Go百科      v                 |
+--------------------------------+

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.

If you calculate the page position of the div element you can do without knowing the header element:

function resize() {
    var el = $("#bottom");
    el.height($(document).height() - el.offset().top);
}

I recommend you to try jquery-layout plugin. You will see a bunch of demos and examples on the link.

I don't know if you are familiar with the concepts of JQuery or some other Javascript helper framework, like Prototype.js or Mootools but it's a vital idea to use one of them. They are hide most browser-related tricks from the programmer and they have a number of useful extension for UI, DOM manipulation, etc.

var sizeFooter = function(){
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);