设置内容的高度100%jQuery的手机

我正在开发我的CSS的jQuery Mobile页面

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

但页面显示是这样的

在这里输入图像描述

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

更新

我在下面添加了一个纯CSS解决scheme 。

我注意到.ui-content div没有填满100%空间,仍然是2px 。 这些来自固定的工具栏页眉页脚 ,因为它们分别具有margin-top: -1pxmargin-bottom: -1px 。 ( 小提琴 )

在这里输入图像描述

这是不明显的,因为页面div页脚都有相同的黑色data-theme="b" 。 我改变了.ui-pagebackground-color: red; 以显示差异。

因此,为了达到最佳效果,有必要检查工具栏是否是固定的。 以下是增强的解决scheme。

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及以下版本中的固定工具栏没有得到top / bottom -1 ,所以不需要从工具栏的.outerHeight()减去1px

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

演示 – w /固定工具栏

演示 – 没有固定的工具栏(1)

(1)在桌面浏览器页面将滚动1px; 但是,在移动设备上它不。 它是由身高99.9%.ui-page100%

这只是给@奥马尔的答案增加了几个观点。

他更新了FIDDLE

把他的缩放代码放在一个函数中,并将滚动(0,0)添加到顶部。 这消除了在某些设备上的方向更改(纵向到横向)时可能出现的奇怪问题。

 function ScaleContentToDevice(){ scroll(0, 0); var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height(); $(".ui-content").height(content); } 

然后应该在pagecontainershow上调用该函数(如果是jQM 1.3,则为pageshow),并且应该为窗口大小调整和orientationchange添加处理程序,以便在视口大小更改时保持内容大小正确:

 $(document).on( "pagecontainershow", function(){ ScaleContentToDevice(); }); $(window).on("resize orientationchange", function(){ ScaleContentToDevice(); }); 

纯CSS的解决scheme

重要说明:对于不希望页面或页面内容垂直滚动的特定页面,请使用此解决scheme。 因为页面的height将设置为100% ,因此它不会滚动,您将面临此问题 。

  1. 全屏:

     html, body, #pageID { /* specify page */ height: 100%; margin: 0; padding: 0; } #pageID .ui-content { padding: 0; } .ui-content, .ui-content #full-height-div { /* divs will inherit page's height */ height: inherit; } 

    演示


  1. 固定工具栏(页眉/页脚):

     html, body, #pageID { height: 100%; margin: 0; padding: 0; } #pageID, #pageID * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageID .ui-content { height: inherit; /* inherit height without padding nor border */ } 

    演示


  1. 浮动工具栏:

     html, body, #pageID { height: 100%; margin: 0; padding: 0; } #pageID, #pageID * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageID .ui-content { height: calc(100% - 89px); /* 88px = header's height 44px and footer's 44px plus 1px */ } 

    演示

你只能用CSS实现“身高100%”。 将以下内容添加到您的ui-contentselect器中:

 position: absolute; top: 0; right: 0; bottom: 0; left: 0; 

在jQuery Mobile v1.4.3上testing

用纯CSS工作正常的肖像页面。 您必须根据页眉和页脚高度设置顶部和底部位置

 position: absolute; top: 88px; /*your header height*/ right: 0; bottom: 44px; /*your footer height */ left: 0; background: white; 

我改变@ezanker的答案。

它可以工作,但是如果我有两页,当我从第一页转到页面2时,页面2将会resize。

如果我更改事件pagecontainershow pagecontainerbeforeshow ,它不能正常工作。

我debugging和查找页眉或页脚的高度是错误的之前显示。

 function ScaleContentToDevice(nextPage){ var screen = $.mobile.getScreenHeight(); var header = nextPage.children(".ui-header").hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight(); var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight() var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height(); var content = screen - header - footer - contentCurrent; nextPage.children(".ui-content").height(content); } $(document).on( "pagecontainershow", function(event, ui){ var nextPage = $(ui.toPage[0]); ScaleContentToDevice(nextPage); }); 
 position: fixed; height: 100%; 

会做的!