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
Solution 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 (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%
.
Solution 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();
});
Solution 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 to100%
, hence, it won't scroll and you will face this problem.
-
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
-
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
-
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
Solution 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