JSFiddle - React, Tailwind, and code Playground

HTML

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

<div data-role="page" id="zero">
    <div data-role="header">
        <h1>Page Zero</h1>
    </div>
    <div data-role="content">
        <a data-role="button" href="#one">Go to Next Page</a>
    </div>
    <div data-role="footer">
        <p>Footer</p>
    </div>
</div>

<div data-role="page" id="one">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <a data-role="button" href="#zero">Go to Previous Page</a>
    </div>
    <div data-role="footer">
        <p>Footer</p>
    </div>
</div>

JavaScript

$(document).on("pageshow", ".ui-page", function () {
    var $page  = $(this),
        vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();

    if (vSpace < $(window).height()) {
        var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
        $page.children('.ui-content').height(vDiff);
    }
});