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  (x% tall)   |
|================================|
|              ^                 |
|              |                 |
|             div                |
|        (100%-x% tall)          |
|              |                 |
|              v                 |
+--------------------------------+

Answer 1

Can you position absolutely? Try the following HTML code:

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

With the following CSS code:

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 give #content top padding >= 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

umm, you need to add html, body { height: 100%; }, after this, a relative element, with min-height: 100%

After this, for IE6

<!--[if lt IE 7]>
<style media="screen" type="text/css">
    MyAutoheightElement
    {
        height: 100%;
    }
</style>
<![endif]-->

This will give your site 100% height in every browser.
Try it! I hope it helps :)

Answer 3

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";
}

Answer 4

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.