JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

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" data-theme="b" id="p1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
         <h1>Header</h1>

    </div>
    <div role="main" class="ui-content" data-theme="a">
        <div class="ui-body ui-body-a ui-corner-all">
            
<h3>Heading</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
         <h1>Footer</h1>

    </div>
</div>

CSS

.ui-content {
    background-color: lightblue !important;
}

JavaScript

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();
    
    $(window).on("resize orientationchange", function(){
        ScaleContentToDevice();
    })
});

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() -         $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}