JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
  <div id="container">
    <header>
      header
    </header>

    <div id="content">
      <div id="map_canvas" style="width: 100%; height: 100%;"></div>
    </div>

    <footer>
      This footer is absolutely positioned
    </footer>
  </div><!-- /#container -->

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
  background: #300;
}

#container {
  background: #ccc;
  height: 100%;
  margin: 0 auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;

  /*height:auto !important;  real browsers */
  height:100%; /* IE6: treaded as min-height*/

  min-height:100%; /* real browsers */
}

header {
  height: 108px;
  position: relative;
  background: #0ff;
}

#content{
  bottom: 0;
  overflow: hidden;
  margin-top: 108px;    /* header's height */
  position: absolute;
  top: 0;
  width: 100%;
}

footer {
  position: absolute;
  clear: both;
  width: 100%;
  height: 40px;
  bottom: 0;    /* stick to bottom */
  background: #ff0;
  border-top: 1px solid #ccc;
}

JavaScript

function initialize() {
  var latlng = new google.maps.LatLng(52.397, 1.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

window.onload = initialize();