jQuery Mobile 1.42中每个屏幕底部的空白

Question

Hi iam using jquery mobile 1.42 to develop web application. Every thing works great except unwanted white space occurring in bottom of window on every pages. I have only header and content. Iam not using footer. can any one guide me.

Answer 1

You need to understand how jQuery Mobile pages works. Footer and header are fixed with fixed height values. Content is on the other hand stretchable so it will resize according to its inner content, it will NEVER automatically resize to take rest of available space, left after footer and header. Space not covered by content is a white space you are mentioning.

There are two available solutions two your problem, one is CSS based and second one is JavaScript based.

CSS solution:

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;    
}

40px is here because of header and footer, set it to 0 if you don't need them.

Working example: http://jsfiddle.net/Gajotres/hJVuM/

JavaScript solution

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    }
    return content_height;
}

Working example: http://jsfiddle.net/Gajotres/5Qu6P/

Ream more about this topic here .