set content height 100% jquery mobile

by

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)

enter image description here

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

More Related Contents:

  1. How to fallback to local stylesheet (not script) if CDN fails
  2. CSS Button styling – Need some help -html css RADIO BUTTON LINK
  3. Make body have 100% of the browser height
  4. Change Select List Option background colour on hover
  5. How to center elements on the last row in CSS Grid?
  6. Is there an equivalent to background-size: cover and contain for image elements?
  7. Using margin:auto to vertically-align a div
  8. CSS: Control space between bullet and
  9. Select dropdown with fixed width cutting off content in IE
  10. How to draw circle in html page?
  11. How to horizontally align ul to center of div?
  12. How can I make a CSS glass/blur effect work for an overlay?
  13. CSS – Make divs align horizontally
  14. Calculator keypad layout with flexbox
  15. How to exclude particular class name in CSS selector?
  16. How to position a div scrollbar on the left hand side?
  17. Difference between overflow-wrap and word-break?
  18. How to vertically center a inside a div? [duplicate]
  19. floating elements behavior
  20. Div width 100% minus fixed amount of pixels
  21. overflow:scroll; in
  22. Is there a disadvantage of using `display:table-cell`on divs?
  23. @Font-face not working on mobile
  24. How are `display: table-cell` widths calculated?
  25. How can I target a specific column or row in a CSS grid layout?
  26. body { overflow-x: hidden; } breaks position: sticky
  27. How to create a triangle in CSS3 using border-radius
  28. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  29. What are the default values for justify-content & align content?
  30. IE7 CSS Scrolling Div Bug

Leave a Comment