jq 设置html高度自动,html – 设置内容高度100％jquery手机

更新

I have added a 07000 below.

我注意到,.ui-content div没有填满100％的空白空间,仍然缺少2px.这些来自固定的工具栏页眉和页脚,因为它们分别具有margin-top：-1px和margin-bottom：-1px. (fiddle)

以前不是很明显,因为页面div和页脚都具有相同的black data-theme =“b”.我已经改变了.ui-page的background-color：red;显示差异.

因此,为了获得最佳效果,需要检查工具栏是否固定.以下是增强的解决方案.

jQM> = 1.3

var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

/* content div has padding of 1em = 16px (32px top+bottom). This step

can be skipped by subtracting 32px from content var directly. */

var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

jQM <= 1.2 由于jQuery Mobile 1.2及以下版本固定的工具栏不能在顶部/底部得到-1,所以不需要从工具栏的.outerHeight()中减去1px.

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

07002 – w/ fixed toolbars

07003 – w/o fixed toolbars (1)

(1)在桌面浏览器页面上将滚动1px;然而,在移动设备上它并没有.这是由身体的高度设置为99.9％和.ui页面到100％.