set content height 100% jquery mobile

问题:

I am developing jQuery Mobile page in which my CSS is

.ui-content {
  background: transparent url(\'./images/bg.jpg\');
  background-size : 100% 100%;
  min-height: 100%;
  color:#FFFFFF;
  text-shadow:1px 1px 1px #000000;
}

but page displays like this

I don\'t want that empty space between content and footer content height till the footer

回答1:

Update

I have added a Pure CSS Solution below.

I have noticed that .ui-content div doesn\'t fill the empty space 100%, it is still missing 2px. Those comes from fixed toolbars header and footer, as they have margin-top: -1px and margin-bottom: -1px respectively. (fiddle)

It wasn\'t obvious before as both page div and footer have the same black data-theme=\"b\". I have changed .ui-page\'s background-color: red; to show the difference.

Therefore, to achieve best results, it\'s necessary to check whether toolbars are fixed. Below is the enhanced solution.

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

Since fixed toolbars in jQuery Mobile 1.2 and below don\'t get -1 for top/ bottom, there is no need to do subtract 1px from toolbar\'s .outerHeight().

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

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

Demo - w/ fixed toolbars

Demo - w/o fixed toolbars ⁽¹⁾

⁽¹⁾ On Desktop browser page will scroll by 1px; however, On mobile device it doesn\'t. It\'s caused by body\'s height set to 99.9% and .ui-page to 100%.

回答2:

This is just to add a couple of points to @Omar\'s answer.

His updated FIDDLE

Put his scaling code inside a function and add scroll(0,0) to the top. This eliminates weird issues that can come up during orientation changes (portrait to landscape) on some devices.

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

The function should then be called on pagecontainershow (pageshow if jQM 1.3) and you should add a handler for window resize and orientationchange to keep the content properly sized when the viewport size changes:

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

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

回答3:

Pure CSS solution

Important note: Use this solution for specific pages, where you don\'t want page or page\'s content to scroll vertically. Because page\'s height will set to 100%, hence, it won\'t scroll and you will face this problem.

1. Full Screen:

   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. Fixed Toolbars (header/footer):

   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. Floating Toolbars:

   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

回答4:

You can achieve \"height 100%\" with CSS only. Add the following to your ui-content selector:

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

Tested on jQuery Mobile v1.4.3

回答5:

I change @ezanker \'s answer.

It works, but if I have two pages, page 2 will resize when I go to page 2 from page 1.

And if I change event pagecontainershow to pagecontainerbeforeshow, it does not work correctly.

I debug and find height of header or footer is wrong before show.

code

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

回答6:

With pure CSS works fine for portrait pages. You must set top and bottom position depending of your header and footer height

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

回答7:

the simple answer isn\'t in resizing the content div but in changing the background color of the active page like this...

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

...to match the color of the ui-content and all of a sudden the problem goes away.

回答8:

position: fixed;
height: 100%;

will do it!