Question

我有一个包装在PhoneGap中的jQuery移动应用程序。我试图使用固定的页脚和标题，并与页脚有一些麻烦。如果我有X长度的内容，然后点击后内容较小 - 页脚将向上移动而不是粘在屏幕的底部。如果我点击屏幕，它将返回原位。

为什么会发生这种情况？

我的页脚代码是：

<div data-role="footer" data-position="fixed" data-id="footer_main">
    <div data-role="navbar">
        <ul class="navbar">
            <li><a href="#home" data-icon="home" class="search">Home</a></li>
            <li><a href="#bycity" data-icon="search" class="search2">City</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

这个问题会在Android和iPhone上以几乎相同的方式发生（iPhone甚至可能更多）。

BTW - 我正在使用jQuery mobile“jquery.mobile-1.0b2”和PhoneGap 1.0

Answer 1

尝试在页脚中添加一个类：

<div class=”footer” data-role="footer" .....>

并将以下功能添加到您的点击事件中：

$('.footer').trigger('create');

应该是这样的：

$('.class').click(function() {

    $('.footer').trigger('create');

});

Answer 2

我也有同样的问题。当用户点击show-navigation-button时，我的导航将被隐藏，并将显示。

问题是，JQM为页脚位置计算和动画使用position：fixed的top属性instad;底部：0;

我敢肯定，他们有理由选择。但我不知道它是什么。我发现没有重新定位页脚顶部位置的功能。 $('.footer').trigger('create'); ..不适合我。

Answer 3

您可以通过向其添加CSS属性来将页脚固定在底部。

bottom:0;
position:absolute !important; 
top: auto !important; 
width:100%;

Answer 4

add style =＆＃34; position：absolute＆＃34;这样的页脚div：

<div data-role="footer" data-position="fixed" style="position: absolute">

jQuery Mobile和固定的页脚

4 个答案: