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;
}

但页面显示如下

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

解决方法

更新

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％.