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

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