title: CSS position - Google Maps Cutoff
body: <p>Trying to place a header bar at top of a full page Google Map but for some reason it keeps pushing the map below the browser view and cuts off.</p>
  
  <p>If I place the top header (<code>#top</code>) above the map, then position <code>.mapCont</code> to start at <code>top:35px</code>, where <code>#top</code> ends, it pushes the map below the bottom of browser and creates a scroll.  Why doesn't it just fit to 100% height regardless of the fixed position layout?  It appears to be pushing it 35px below the extents of the browser window. </p>
  
  <p>Cant seem to sort this one out. Thoughts?</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  
  &lt;style type="text/css"&gt;
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { width:100%; height:100%; background: #111 url(../images/loading.gif) no-repeat 50% 50%; z-index: 1; }
  
  .mapCont { 
       display: block;
       height:100%; 
       width:100%; 
       position:fixed;
       top:35px;
       left:0;
       background-color:#111;
       z-index: 0;
  }
  
  #top{ 
      height:35px;
      width:100%;
      background: url('../images/finals/wood_top.png') repeat-x;
      display: block;
      position:fixed;
      top:0;
      left:0;
      z-index: 100;
  }
  
  .headerLine {
      height:14px;
      width:100%;
      background: url('../images/finals/headerLine.png') repeat-x;
      display: block;
      position:fixed;
      top:31px;
      left:0;
      z-index: 99;
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    function initialize() {
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
          myOptions);
    }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  
  &lt;div id="top"&gt;  
  
          &lt;div class="mapCont"&gt;
            &lt;div id="map_canvas"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="headerLine"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>