在过去的一天中,我一直在设法在移动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 -->
解决方法
data-role =“page”元素的最小高度通过JavaScript在窗口对象的大小事件处理程序中设置.您可以创建自己的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用于设置固定位置页脚;超时时间可能会变小.这是因为jQuery Mobile Framework将固定位置页脚重新定位回页面底部.这个例子可以在这里看到：http://jsfiddle.net/sAs5z/
另一个注意事项,您可能只想重新定位固定位置页脚元素,并使页面的最小高度属性保持不变;这将使页面渐变覆盖整个屏幕,但页脚在它和内容之间不会有任何空间.这是一个这个方法的演示：http://jsfiddle.net/sAs5z/2/
