title: Google map fill page remaining beneath header
body: <p>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.</p>
  
  <p>The trouble I have is that the page keeps scrolling and I don't want it to. It scrolls the same amount as the header height. I tried putting overflow: hidden but that doesn't work because although it no longer scrolls it also doesn't show the google logo and legal stuff that is required.</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;Title&lt;/header&gt;
    &lt;div id="appcontent"&gt;
        &lt;div id="map-canvas"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>html, body {
    margin: 0px;
    width: 100%;
    height: 100%;
  }
  #appcontent {
    width: 100%;
    height: 100%;
  }
  #map-canvas {
    width: 100%;
    height: 100%;
  }
  header {
    width: 100%;
    height: 40px;
    background-color: #CFCFCF;
  }
  </code></pre>
  
  <p>I've made a Fiddle of what I'm trying to do here:
  <a href="http://jsfiddle.net/5LVQX/1/" rel="nofollow">http://jsfiddle.net/5LVQX/1/</a></p>
  
  <p>Can anybody help me out with this?</p>