JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<div data-role="page">
    <div data-role="header">
        	<h1>Page Title</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content" id="contentDiv">
        <!-- /content -->
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a" style="height:30%">Block A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a" style="height:30%">Block B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-a" style="height:30%">Block C</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a" style="height:30%">Block A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a" style="height:30%">Block B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-a" style="height:30%">Block C</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a" style="height:30%">Block A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a" style="height:30%">Block B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-a" style="height:30%">Block C</div>
            </div>
        </div>
    </div>
    <!-- /grid-c -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->

CSS

.ui-content {
    padding: 0;
}

JavaScript

var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

/* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent - 1;

$(".ui-content").height(content);