1

I'm developing a mobile app using jQuery Mobile and I'm getting a white space between the content and footer. How do I close this space?

the site with the white at the bottom

CraigTeegarden
  • 8,173
  • 8
  • 38
  • 43

2 Answers2

2

There are 3 solutions to this problem.

  1. If you can use same data-theme for both content and page container. Unfortunately it wont look nice because there will still be a visible difference between both of them

  2. Don't use data-theme on container but always use it only on page div. Still not a best solution.

  3. Resize your content so it fills available free space. Use this method: 

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

Read more about this solution in my other ARTICLE (my personal blog), or find it HERE, look for the chapter: Get correct maximum content height.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
0

You can adjust the color of the ui-page-theme-a in your style/css, so you wont recognize it

.ui-page-theme-a
{
    background-color: sameAsContent/Footer !important;
    border-color: sameAsContent/Footer !important;

}
LosKartoflos
  • 142
  • 2
  • 12
  • even there's allready an answer given and the thread is old, i added this. because it was a workaround for me and this is the first link, if you google the problem. – LosKartoflos Sep 15 '15 at 13:57