How to Make jQuery Mobile Content 100% Height?

Setting 100% Height for Content in jQuery Mobile

In jQuery Mobile, it can be challenging to set the content height to 100% of the available space, especially if there is space between the content and footer.

CSS Implementation

The following CSS code may not be enough to achieve the desired results:

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

Solution

An enhanced solution considers whether the header and footer toolbars are fixed. If they are, the code must subtract 1px from their outer height to account for the negative margins.

For jQuery Mobile >= 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. Subtract this value if desired. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

For jQuery Mobile <= 1.2:

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

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

Additional Notes

• If fixed toolbars are present on the page, the content will scroll by 1px on desktop browsers.
• On mobile devices, the page may not scroll due to body and .ui-page height settings.

The above is the detailed content of How to Make jQuery Mobile Content 100% Height?. For more information, please follow other related articles on the PHP Chinese website!