1

我一直在使用 PhoneGap 和 jQuery Mobile 开发一个项目。我的设置在单个 html 文件中使用多个页面。

我遇到了一个问题，我在任何地方都没有找到类似的东西：

当我重新访问一个页面时，这意味着我访问了它，然后导航到另一个页面，现在返回到第一页，页眉和内容之间以及页脚和页面内容之间都有一些填充。

如下图所示：

http://i.imgur.com/neBwZYx.png

下面你可以看到添加的填充，红色背景，当返回到上面的页面时（每个页面都会发生这种情况）

http://i.imgur.com/u1whW9b.png

代码非常大，可以在这里发布，所以如果有人有建议，请告诉我如何解决这个问题或在哪里寻找问题。

应该注意的是，该问题仅在应用程序在 Android 平板电脑上运行时存在，而不是在通过笔记本电脑上的浏览器查看时存在。

谢谢

4

1 回答 1

0

您可以使用此功能强制正确的内容高度：

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

它必须在 pageshow 事件期间激活，因为只有在该点页面高度是正确的：

$(document).on('pageshow', '#index', function(){       
    $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
});

工作示例：http: //jsfiddle.net/Gajotres/nVs9J/

如果您想了解有关此功能的更多信息，请阅读我的另一篇文章：https ://stackoverflow.com/a/14550417/1848600

于 2013-05-10T08:58:50.360 回答