JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
div#container {
height:100%;
width:100%;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
margin:0 auto;
min-height:100%;
overflow:hidden;
position:relative;
}
div#header {
height:50px;
position:relative;
}
div#leftCol {
left:0;
bottom:0;
top:0;
overflow:hidden;
padding-bottom:35px;
margin-top:55px;
position:absolute;
width:300px;
}
div#content {
right:0;
bottom:0;
top:0;
left: 300px;
overflow:hidden;
padding-bottom:35px;
margin-top:55px;
position:absolute;
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:20px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
.paddedContent {
height:100%;
margin: 5px;
border: solid 1px red;
}
</style>
<script type="text/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);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="leftCol">
<div class="paddedContent">This is the left column</div>
</div>
<div id="content">
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
...