jQuery移动页面高度

Question

在过去的一天里,我一直试图弄清楚如何在移动Safari中查看时更改jQuery移动页面上的最小高度样式.我试过,内联样式,覆盖ui页面样式,还没有找到一种方法来覆盖data-role ="page"的高度.理想情况下,如果页面"内容"小于"页面"高度,我希望"页面"高度自动调整为"内容".我附上了一个插图,以便更好地解释这个问题.

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

Answer 1

在min-height所述的data-role="page"元件被通过JavaScript在设置resize为事件处理程序window对象.您可以创建自己的JavaScript,以不同的方式调整页面大小:

$(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');
});

这是一个演示: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/