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

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

    

        Header
    
    

        Bottom
    

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.