设置内容高度100%jquery mobile

Question

我正在开发我的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;
}

但页面显示如下

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

Answer 1

更新

我在下面添加了一个Pure 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

由于jQuery Mobile 1.2及更低版本中的固定工具栏不适-1用于top/ bottom,因此无需1px从工具栏中删除.outerHeight().

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

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

演示 - 带固定工具栏

演示 - 没有固定工具栏⁽¹⁾

⁽¹⁾在桌面浏览器页面上将滚动1px; 但是,在移动设备上却没有.它是由body高度设定为99.9%和.ui-page导致的100%.

Answer 2

这只是为@Omar的回答添加了几点.

他最新的FIDDLE

将他的缩放代码放在一个函数中,并将scroll(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();
});

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

   演示

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

   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 */
   }
   

   演示

3. 浮动工具栏:

   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 */
   }
   

   演示