set content height 100% jquery mobile

Question

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

Answer 1

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;

Answer 2

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

---

2. 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

---

3. 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

Answer 3

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

Answer 4

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

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

Answer 6

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.