设置内容高度100%jQuery移动

Question

设置内容高度100%jQuery移动我正在开发jQueryMobile页面，其中我的CSS是.ui-content {   background: transparent url('./images/bg.jpg');   background-size : 100% 100%;   min-height: 100%;   color:#FFFFFF;   text-shadow:1px 1px 1px #000000;}但是页面显示如下我不想让内容和页脚内容高度之间的空间直到页脚

Answer 1

更新

我增加了一个纯CSS解下面。

我注意到.ui-contentDIV没有100%填充空间，它仍然缺少2px..那些来自固定工具栏标头和页脚，就像他们一样margin-top: -1px和margin-bottom: -1px分别。(小提琴)

在此之前并不明显，因为两者都是页div和页脚同样的黑色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

自固定jQueryMobile1.2及更低版本中的工具栏不会-1为top/ bottom，没有必要做减法。1px从工具栏的.outerHeight().

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

演示-W/固定工具栏

演示-W/O固定工具栏⁽¹⁾

⁽¹⁾在桌面浏览器页面上滚动1 px；但是，在移动设备上没有滚动。body其高度设置为99.9%和.ui-page到100%.

Answer 2

他的更新小提琴

将他的缩放代码放入一个函数中，并将滚动(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上调用该函数(如果jqm1.3为Pageshowif)，您应该添加一个处理程序，用于窗口大小和方向的更改，以便在viewport大小更改时保持内容的适当大小：

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

Answer 3

纯CSS解

重要说明：对特定页面使用此解决方案，您不希望页面或页面的内容垂直滚动。因为佩奇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 */}

   演示