通过JavaScript在 resize 事件中设置 data-role =page元素的/ code> 窗口对象的处理程序。您可以创建自己的JavaScript以不同的方式调整页面大小：

  $（function（）{
 $ .bind（'resize'，function（event）{
 var content_height = $ .mobile.activePage.children（'[data-role =content]'）。height（），
 header_height = $ .mobile.activePage.children（'[data-role =header]'）。height（），
 footer_height = $ .mobile.activePage.children（' ）.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）; 
} 
 event.stopImmediatePropagation（）; 
} ）; 
}）; 
 

这是一个演示：http://jsfiddle.net/sAs5z/1/

请注意 setTimeout 用于设置 fixed-position-footer ;可以使超时持续时间更小。这是因为jQuery Mobile Framework将 fixed-position-footer 重新定位到页面底部。这方面的一个示例如下所示： http://jsfiddle.net/sAs5z/

另一个注意事项，你可能只需要重新定位 fixed-position-footer 元素，并离开页面 min-height 属性相同;这将使页面渐变覆盖整个屏幕，但页脚在它和内​​容之间不会有任何空间。以下是此方法的演示： http://jsfiddle.net/sAs5z/2/

For the past day I have been trying to figure out how to change the min-height styling on a jQuery mobile page when viewing in mobile safari. I have tried, inline styles, overriding ui-page styles and have yet to find a way to override the height of data-role="page". Ideally if the page "content" is less than the "page" height I would like the "page" height to automatically adjust to the "content". I have attached an illustration to better explain the issue.

<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 -->

The min-height of the data-role="page" element is set via JavaScript in a resize event handler for the window object. You can create your own JavaScript that resizes the page differently:

$(function () {
    $(window).bind('resize', function (event) {
        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);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

Here is a demo: http://jsfiddle.net/sAs5z/1/

Notice the setTimeout used to set the fixed-position-footer; the timeout duration can probably be made smaller. This is used because the jQuery Mobile Framework was re-positioning the fixed-position-footer back to the bottom of the page. An example of this can be seen here: http://jsfiddle.net/sAs5z/

Another note, you may want to only re-position the fixed-position-footer element and leave the page's min-height property the same; this will make the page gradient cover the whole screen but the footer won't have any space between it and the content. Here is a demo of this method: http://jsfiddle.net/sAs5z/2/