JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<div data-role="page" id="map-page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content" style="background-color : gold;">
        <p>content</p>
    </div>
    <div data-role="footer">
        <p>Footer</p>
    </div>
</div>

CSS

html, body {
    height : 100%;
}
#map-page {
    height : 100%;
}
#map-page .ui-header {
    height : 40px;
}
#map-page .ui-content {
    position : absolute;
    top      : 40px;
    right    : 0;
    bottom   : 30px;
    left     : 0;
}
#map-page .ui-footer {
    position : absolute;
    bottom   : 0;
    left     : 0;
    width    : 100%;
    height   : 30px;
}