html jquery修改height,设置内容高度100%jQuery移动

更新我增加了一个纯CSS解下面。

我注意到.ui-contentDIV没有100%填充空间，它仍然缺少2px..那些来自固定工具栏标头和页脚，就像他们一样margin-top: -1px和margin-bottom: -1px分别。(小提琴)

在此之前并不明显，因为两者都是页div和页脚同样的黑色data-theme="b"..我变了.ui-page氏background-color: red;显示出不同之处。

因此，要取得最好的效果，就必须检查是否工具栏都是固定的。下面是增强型解决办法。

jqm>=1.3var 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

自固定jQueryMobile1.2及更低版本中的工具栏不会-1为top/ bottom，没有必要做减法。1px从工具栏的.outerHeight().var header = $(".ui-header").outerHeight();var footer = $(".ui-footer").outerHeight();-W/固定工具栏

-W/O固定工具栏(1)

(1)在桌面浏览器页面上滚动1 px；但是，在移动设备上没有滚动。body其高度设置为99.9%和.ui-page到100%.