set content height 100% jquery mobile
css, html, jquery-mobile
Solution
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 (1)
(1) 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%`.
Problem
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