Google Map Fill Page Remaining Beneath Header

I'm trying to make a header div appear above a Google map, but have the map fill all of the rest of the page content. The trouble I have is that the page keeps scrolling and I don'

Solution 1:

By using absolute positioning, like so (fiddle)

#map-canvas {
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
header {
    position: absolute;    
    top: 0px;
    left: 0px;
    right: 0px;    
    height: 40px;
    background-color: #CFCFCF;
}

See position: absolute.

Solution 2:

overflow: hidden

on

body

should also work.

Edit:

Will need

CSS

#appcontent {
  width: 100%;
  height: calc(100% - 40px);
  height: -webkit-calc(100% - 40px);
}

Solution 3:

A quick solution is, add this JS line:

$("#appcontent").height($(document.body).height() - $("header").height());

jsfiddle: http://jsfiddle.net/5LVQX/3/