JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
 <div id="header">Header added just for demonstration purposes</div>
    <div id="wrapper">
        <div id="content">
            <div id="map_canvas"></div>
        </div>
    </div>
        <div id="footer">And this eeeeeeeeeee my footer</div>

CSS

html, body, #map_canvas{
    height: 100%;
	}
#wrapper {
	left: 0px;
	top: 40px;
	bottom: 18px;
	right: 0;
	position: absolute;
    }
#footer {
    bottom: 0; /* Sit it on the bottom */
    right: 0;
    left: 0;
    
    width: 100%; /* As wide as it's allowed */
    }
#content {
    top: 1px;
	bottom: 0px;
	overflow: auto;
	position: absolute;
	left: 0;
	right: 0;
    }

JavaScript

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);
  }

Y.on("domready", function(){
     initialize();   
})