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

enter image description here

I don't want that empty space between content and footer content height till the footer

Isn't it a duplicate of this: http://stackoverflow.com/questions/7445977/jquery-mobile-content-area-100-height-between-head-and-foot ? — keaukraine, Feb 04 '14 at 12:18

score 27 · Accepted Answer · edited May 23 '17 at 11:46

27

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 ⁽¹⁾

⁽¹⁾ 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%.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 04 '14 at 13:02

Omar

32,302
9
69
112

3

great answer as usual! For completeness, I would add a scroll(0,0); before scaling, run it in the "pagecontainershow" event and also add handlers for window resize and orientationchange to keep the content sized (updated demo: http://jsfiddle.net/ezanker/zKS76/4/ ) – ezanker Feb 04 '14 at 14:42
1

@ezanker thank you for sharing those important points, please add a separate comprehensive answer, for everybody's reference :) – Omar Feb 04 '14 at 14:53
1

OK, I added an answer for future reference. – ezanker Feb 04 '14 at 15:32
1

Great find Omar!! We could make it more generic and actually add the TOP to the header and the BOTTOM to the footer (http://jsfiddle.net/ezanker/kEtbL/2/). They are using absolute position and not negative margi. In this way if they decide to change to 2px instead of 1px or remove it in the future your code will still work. What do you think? – ezanker Feb 06 '14 at 20:56
1

@ezanker good idea! If you check fixed header's css, you'll find `top: -1`. – Omar Feb 06 '14 at 21:20
Exactly, look at the fiddle in my last comment: parseInt($(".ui-header").css("top")) || 0; will find the -1 or return 0 if not fixed. parseInt($(".ui-footer").css("bottom")) || 0; does it for the footer... – ezanker Feb 06 '14 at 21:25
@ezanker true, in case user overrides `.ui-header-fixed`'s `top` to any other negative value. – Omar Feb 06 '14 at 21:36
why getting footer height as null? My footer is
– Kelvin Jul 18 '14 at 17:48
@user3059850 when are you retrieving footer's height? – Omar Jul 18 '14 at 19:22

ezanker · Answer 2 · 2014-03-19T13:44:14.487

15

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

edited Mar 19 '14 at 13:44

answered Feb 04 '14 at 15:32

ezanker

24,628
1
20
35

Great solution! I oversaw the `orientationchange` event before. They should make this the default, or add a simple function to add this functionality, so we get it in a single line in jQM. It is just fundamental for responsive web design. – Domi Apr 23 '14 at 12:48
It took me a while to reproduce your result on JSFiddle. I finally hunted it down to the fact that you had your JS set to load in the body, and I had it `onLoad`. Very annoying. Is there a way to determine whether a page event has already fired (and if so, don't wait for it, but call the code instantly)? – Domi Apr 23 '14 at 13:35
@Domi, I don't really understand your question, but I guess you can set a global variable when a page event fires and then test for that variable... – ezanker Apr 23 '14 at 13:49
I was looking for a built-in that already delivers such functionality, and I found it! [This updated version](http://jsfiddle.net/zKS76/19/) works, no matter when it is executed (in head, body or onload). It does so by checking whether `$.mobile.activePage` exists. – Domi Apr 24 '14 at 13:41
But this one not resizing the bg image – Sishu Dec 21 '16 at 15:32
@AlokSInha, this is about resizing the content DIV, not any images you are using. – ezanker Dec 23 '16 at 23:19

score 11 · Answer 3 · edited May 23 '17 at 12:17

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.

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

score 4 · Answer 4 · answered Aug 14 '14 at 01:17

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

answered Aug 14 '14 at 01:17

nunoarruda

2,679
5
26
50

@Kaganar If we remove data-position="fixed" from the header then it will work. – Vaishali Modi Feb 24 '15 at 11:42

score 1 · Answer 5 · edited Feb 28 '16 at 08:47

I change @ezanker 's answer.

It works, but if I have two pages, page 2 will resize when I go to page 2 from page 1.

And if I change event pagecontainershow to pagecontainerbeforeshow, it does not work correctly.

I debug and find height of header or footer is wrong before show.

code

function ScaleContentToDevice(nextPage){
    var screen = $.mobile.getScreenHeight();
    var header = nextPage.children(".ui-header").hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight();
    var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight()
    var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height();
    var content = screen - header - footer - contentCurrent;

    nextPage.children(".ui-content").height(content);
}

$(document).on( "pagecontainershow", function(event, ui){
    var nextPage = $(ui.toPage[0]);
    ScaleContentToDevice(nextPage);
});

score 0 · Answer 6 · answered Dec 18 '14 at 17:55

With pure CSS works fine for portrait pages. You must set top and bottom position depending of your header and footer height

position: absolute;
top: 88px; /*your header height*/
right: 0;
bottom: 44px; /*your footer height */
left: 0;
background: white;

score 0 · Answer 7 · answered Jul 17 '18 at 21:24

0

the simple answer isn't in resizing the content div but in changing the background color of the active page like this...

.ui-page-active {background: #f1f1f1; }

...to match the color of the ui-content and all of a sudden the problem goes away.

answered Jul 17 '18 at 21:24

ppetree

826
3
15
31

score -1 · Answer 8 · answered Aug 23 '16 at 04:06

-1

position: fixed;
height: 100%;

will do it!

answered Aug 23 '16 at 04:06

Kinoli

139
1
4

set content height 100% jquery mobile

8 Answers8

Update

jQM >= 1.3

jQM <= 1.2

Pure CSS solution

Linked

Related