Jqm Ui-Content 100% Height Issue

set content height 100% jquery mobile

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

JQuery Mobile content height:100%

Thank you all guys for answers!

Finally, I have found the solution. My solution is a little messy, but its OK.

This is my css:

    html,body{overflow-y:hidden}
    .frame {
        height: 100% ;
        width: 100% ;
        border: 0  ;
        background-color: green ;
    }

    .content {
        height: 100%;
        width: 100%;
        overflow-y: hidden;
    }

    .ui-content {
        margin: 0   !important ;
        padding: 0   !important ;
        border: 0   !important ;
        outline: 0   !important ;
        height: 100%  ;
        overflow: hidden  ;
    }

But if I use JQuery Mobile header, there will be an extra space (almost equal to header size.) Also It could be solved with the Javascript below :

function correctFrameSize() {
    document.getElementById('content').style.height = (window.innerHeight-40)+"px";
}

jQuery mobile page height

The min-height of the data-role="page" element is set via JavaScript in a resize event handler for the window object. You can create your own JavaScript that resizes the page differently:

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

Here is a demo: http://jsfiddle.net/sAs5z/1/

Notice the setTimeout used to set the fixed-position-footer; the timeout duration can probably be made smaller. This is used because the jQuery Mobile Framework was re-positioning the fixed-position-footer back to the bottom of the page. An example of this can be seen here: http://jsfiddle.net/sAs5z/

Another note, you may want to only re-position the fixed-position-footer element and leave the page's min-height property the same; this will make the page gradient cover the whole screen but the footer won't have any space between it and the content. Here is a demo of this method: http://jsfiddle.net/sAs5z/2/

---

Related Topics