html – 设置内容高度100％jquery手机

概述我正在开发我的CSS的jQuery Mobile页面 .ui-content { background: transparent url('./images/bg.jpg'); background-size : 100% 100%; min-height: 100%; color:#FFFFFF; text-shadow:1px 1px 1px #000000;} 但页面显 @H_419_1@我正在开发我的CSS的jquery Mobile页面

.ui-content {  background: transparent url('./images/bg.jpg');  background-size : 100% 100%;  min-height: 100%;  color:#FFFFFF;  text-shadow:1px 1px 1px #000000;}

但页面显示如下

我不希望内容和页脚之间的空白空间
内容高度直到页脚

解决方法 更新

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

总结

以上是内存溢出为你收集整理的html – 设置内容高度100％jquery手机全部内容，希望文章能够帮你解决html – 设置内容高度100％jquery手机所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。