JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id='map-page'>
    <div data-role="header" data-theme='b'>	<a href='./' data-icon='home' data-iconpos='notext' data-ajax='false'>Home</a>

        	<h1>Map</h1>

    </div>
    <!-- /header -->
    <div data-role="content" id='content'>
        <div id='map'>Notice how the blue border disappears at the bottom.</div>
        <div id='mapFooter'>
            <ul data-role='listview'>
                <li>
                    <h3>Click on a pin for restaurant details...<br>... or browse by type of cuisine.</h3>
                </li>
            </ul>
        </div>
        <!-- /mapFooter -->
    </div>
    <!-- /content -->
</div>
<!-- /page -->

CSS

html, body {
    height: 100%;
    overflow: hidden;
}
div#content {
    min-height: 350px;
    padding-bottom: 0px;
}
div#map {
    min-height: 300px;
    background-color:red;
    border: 4px solid blue;
}

JavaScript

var h = window.innerHeight;
//winhigh = $.mobile.getScreenHeight();
//var headerHeight = $('#map-page .ui-header').height();
var headerHeight = 41;
$('#content').height(h - headerHeight);
var footerHeight = $('#mapFooter').height();
if (debug) console.log("positionMap: heights window=%s footer=%s header=%s, so mapHeight=%s", h, footerHeight, headerHeight, h - headerHeight - footerHeight - 30);
//$("#map").height(h - headerHeight - footerHeight - 35);
$("#map").height(h - headerHeight - footerHeight);