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