设置内容高度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 Solution。

我注意到.ui-content div没有100％填充空白区域，但仍然缺少2px。这些来自修复工具栏标题和页脚，因为它们分别有margin-top: -1px和margin-bottom: -1px。 （fiddle）

  

之前并不明显，因为页面div 和页脚具有相同的黑色data-theme="b"。我已更改.ui-page的{​​{1}}以显示差异。

因此，为了获得最佳效果，有必要检查工具栏是否已修复。以下是增强型解决方案。

jQM＆gt; = 1.3

background-color: red;

jQM＆lt; = 1.2

由于jQuery Mobile 1.2及更低版本中的修复工具栏，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); / -1没有得到top，因此无需减去{{ 1}}来自工具栏的bottom。

1px

  

Demo - 带有固定工具栏

     

Demo - 没有固定工具栏^（1）

^（1）在桌面浏览器页面上将滚动1px;但是，在移动设备上却没有。这是由.outerHeight()的高度设置为var header = $(".ui-header").outerHeight(); var footer = $(".ui-footer").outerHeight(); 和body至99.9%引起的。

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），你应该为window resize和orientationchange添加一个处理程序，以便在视口大小改变时保持内容的正确大小：

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

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

Answer 3

纯CSS解决方案

  

重要提示：将此解决方案用于特定页面，您不希望页面或页面内容垂直滚动。由于网页height将设置为100%，因此，它不会滚动，您将面对此problem。

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

     

   <强> Demo

---

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

     

   <强> Demo

---

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

     

   <强> Demo

Answer 4

你可以达到＆＃34;身高100％＆＃34;仅限CSS。将以下内容添加到您的ui-content选择器：

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

在jQuery Mobile v1.4.3上测试

Answer 5

我改变了@ezanker的回答。

它有效，但如果我有两个页面，当我从第1页转到第2页时，第2页将调整大小。

如果我将事件pagecontainershow更改为pagecontainerbeforeshow，则无效。

我在调试之前调试并找到页眉或页脚的高度错误。

<强>码

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

Answer 6

使用纯CSS可以很好地处理肖像页面。您必须根据页眉和页脚高度设置顶部和底部位置

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

Answer 7

简单的答案不是调整内容div的大小，而是像这样更改活动页面的背景颜色...

.ui-page-active {background: #f1f1f1; }

...为了匹配用户界面内容的颜色，问题突然消失了。

Answer 8

	$(document).on("scroll",function(){
		if($(document).scrollTop()>100){ 
			$("header").removeClass("large").addClass("small");
			}
		else{
			$("header").removeClass("small").addClass("large");
			}
		});

会做到的！