Fluid Height Main Body With Header And Footer

What I am trying to do is have the header at the top of the page and the footer at the bottom, with the map full up all availiable space in-between. I also want the header and foot

Solution 1:

My answer here may help: Set div block to 100% height

Simply set the height of the footer and a negative margin on the content:

#footer { height:100px; }
#container { margin-bottom:-100px; padding-bottom:100px; }

Here is an example of how you'd include a footer: JSFiddle.

Do note that this will not work in IE7 due to its usage of box-sizing.

Edit: You'll also need to add padding to the container as well to prevent container text appearing under the footer. I've fixed the JSFiddle example to include this.