JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="p1">
    <div data-role="header" data-position="fixed">
         <h1>Sign up</h1>

    </div>
    <div role="main" class="ui-content">
<a href="#p2" class="ui-btn ui-btn-b ui-btn-icon-left ui-icon-check ui-btn-corner-all">Next Page</a>

    </div>
    <div data-role="footer" data-position="fixed" data-theme="a">
         <h1>copyright &#169; foo inc.</h1>

    </div>
</div>
<div data-role="page" id="p2">
    <div data-role="header" data-position="fixed" data-add-back-btn="true">
         <h1>Thank you!</h1>

    </div>
    <div role="main" class="ui-content"></div>
    <div data-role="footer" data-position="fixed" data-theme="a">
         <h1>copyright &#169; bar inc.</h1>

    </div>
</div>

CSS

#p1 .ui-content {
    background: rgb(197, 222, 234);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(197, 222, 234, 1)), color-stop(31%, rgba(138, 187, 215, 1)), color-stop(100%, rgba(6, 109, 171, 1)));
    background: -webkit-linear-gradient(top, rgba(197, 222, 234, 1) 0%, rgba(138, 187, 215, 1) 31%, rgba(6, 109, 171, 1) 100%);
}
#p2 .ui-content {
    background: rgba(212, 228, 239, 1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(212, 228, 239, 1) 0%, rgba(134, 174, 204, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, rgba(212, 228, 239, 1)), color-stop(100%, rgba(134, 174, 204, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(212, 228, 239, 1) 0%, rgba(134, 174, 204, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(212, 228, 239, 1) 0%, rgba(134, 174, 204, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(212, 228, 239, 1) 0%, rgba(134, 174, 204, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(212, 228, 239, 1) 0%, rgba(134, 174, 204, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1);
}

JavaScript

function contentHeight() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
        screen = $.mobile.getScreenHeight(),
        header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
        footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
        /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
        contentCurrent = $(".ui-content", activePage).outerHeight() - $(".ui-content", activePage).height(),
        content = screen - header - footer - contentCurrent;
    /* apply result */
    $(".ui-content", activePage).height(content);
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);