设置内容的高度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: -1px和margin-bottom: -1px 。 （ 小提琴 ）
这是不明显的，因为页面div和页脚都有相同的黑色data-theme="b" 。 我改变了.ui-page的background-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-page至100% 。
这只是给@奥马尔的答案增加了几个观点。
他更新了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%，因此它不会滚动，您将面临此问题 。
-
全屏：
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; }演示
-
固定工具栏（页眉/页脚）：
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 */ }演示
-
浮动工具栏：
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%;
会做的！
