Content “div” Height – Fill Page Height–Part 2


Omar has written a great article already on using JavaScript to size the jQM content DIV to fill the given device’s height; however there is one use case this does not cover. A user might want the footer to be visible and fixed  at the bottom of the page anytime the content of the page is shorter than the vertical space available, but once the content is long enough, the user might then want the footer to be “pushed” down so it appears below the content when the page is scrolled.

The part 1 article makes it so that the footer is always visible at the bottom of the page and the content div is scrolled. If instead we use a plain footer with no JavaScript and without the data-position fixed, the footer appears below the content, but if the content is less than the vertical space available, the footer appears in the middle of the page:

floatingFooter

Using data-position=”fixed” on the footer stops the footer from appearing in the middle of the page, but prevents it from being “pushed” down with longer content:

fixedFooter
The trick to make this work is to use the same calculation from the original article to get the available space of the content, but instead of setting the height of the content DIV, we set the CSS min-height attribute. In this way, for smaller content the min-height takes effect and the footer appears fixed at the bottom of the screen, while for long scrolling content, min-height is essentially ignored and the footer is always below the content.

The HTML markup is just the standard jQM page structure. The header can be fixed or not, but the footer must NOT be fixed to use this trick::

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My pageh1> 
    div>
    <div role="main" class="ui-content">
        content here.
    div>
    <div data-role="footer">
         <h1>I am the footerh1> 
    div>
div>

Now the JavaScript is exactly the same as in the previous article except for one line:

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

is changed to

$(".ui-content").css("min-height", content + "px");

We still need to recalculate the min-height whenever the screen is re-sized or the orientation of the device is changed, so the entire script looks like this:

function contentHeight() {
    var screen = $.mobile.getScreenHeight();  
    var header = $(".ui-header:visible").hasClass("ui-header-fixed") ? $(".ui-header:visible").outerHeight() - 1 : $(".ui-header:visible").outerHeight();
    var footer = $(".ui-footer:visible").hasClass("ui-footer-fixed") ? $(".ui-footer:visible").outerHeight() - 1 : $(".ui-footer:visible").outerHeight();
    var contentCurrent = $(".ui-content:visible").outerHeight() - $(".ui-content:visible").height();
    var content = screen - header - footer - contentCurrent;
    $(".ui-content:visible").css("min-height", content + "px");
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);

The following link is to a jsFiddle demo of the above trick.

jQM min-height trick for footer display

The first page has short content and the second page has long content. Try re-sizing the output window and you will see that the footer is always at least at the bottom of the screen and then for longer content, the footer appears below the content when the page is scrolled down.

Buy Me A Coffee :) @ ko-fi.com

Advertisements

10 thoughts on “Content “div” Height – Fill Page Height–Part 2

  1. ezanker I’ve another problem, the change for portraot to landscape the height not work fine.

  2. ezanker, I don’t know how to create a multiple template page in jsFiddle , could you help me?

  3. Alejandro, can you create a jsFiddle that reproduces the issue? I need to see your code to provide any useful feedback…

  4. I have a problem. My application is multipage layout, when I change from the first page to the second the function said that header’s and footer’s height is 1px Why?.
    In the first page works fine.

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s