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

Answer 1

You could use absolute positioning.

HTML

    

        Header
    
    This is where the content starts.

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.