设置内容高度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.3var 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)(1)在桌面浏览器页面上滚动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%因此，它不会滚动，您将面临这样的情况问题.全屏：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 */}演示