jQuery Mobile和固定页脚

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甚至更多）。

顺便说一下 - 我正在使用jQuery mobile“jquery.mobile-1.0b2”和PhoneGap 1.0。

- Roman

---

这是一个jQuery Mobile的问题。目前还没有解决方案。 - Julien Lafont

等待 b3，...和最终版本 - Julien Lafont

即使在1.0RC2版本中，这仍然是一个未解决的问题。 - Mathias Conradt

Answer 1

尝试为您的页脚添加一个类：

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

同时在点击事件中添加以下函数：

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

应该长这样：

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

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

});

- LarsB

Answer 2

你可以通过添加CSS属性将页脚固定在底部。

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

- Nitor Mobile Team

Answer 3

将style="position: absolute"添加到页脚div中，像这样：

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

- batanasov

Answer 4

我也有同样的问题。我的导航栏是隐藏的，当用户点击显示导航按钮时才会显示。

问题在于，JQM计算和动画化页脚位置时使用的是top属性，而不是使用position: fixed; bottom: 0;

我相信他们选择这种方式肯定有原因。但我不知道是什么原因。 而且我找不到重新定位页脚顶部位置的函数。 $('.footer').trigger('create'); ..对我来说没有用。

- mr_app