JSFiddle - React, Tailwind, and code Playground

HTML

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

<div data-role="page">
     <div data-role="header">
             Header Elements
     </div>
     <div data-role="content" class="homeNav">
            <ul data-role="listview" data-inset="false" data-filter="false">
                <li><a href="expertise.html">Expertise</a></li>
                <li><a href="greatesthits.html">Greatest Hits</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="mindset.html">Mindset</a></li>
                <li><a href="connect.html">Connect</a></li>
             </ul>  
     </div><!-- /content -->

     <div data-role="footer" data-position="fixed">
             Footer elements
     </div><!-- /footer -->
</div><!-- /page -->

JavaScript

$(function () {
    $(window).bind('resize', function () {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();
        
        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
    }).trigger('resize');
});