jQuery Mobile和一个固定的页脚 [英] jQuery Mobile and a fixed footer

问题描述

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

I've got a jQuery mobile app wrapped in PhoneGap. I'm trying to use a fixed footer and header and having some trouble with the footer. If I have content with X length and then after a click the content is smaller - the footer would move up and not stick to the bottom of the screen. If I click on the screen it will go back to its place.

任何想法为什么会发生这种情况？

Any ideas why this happens?

我的页脚代码是：

<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可能更多）。

This issue would happen on Android and iPhone in pretty much the same way (iPhone maybe even more).

BTW - 我使用jQuery mobilejquery.mobile-1.0b2和PhoneGap 1.0

BTW - I'm using jQuery mobile "jquery.mobile-1.0b2" and PhoneGap 1.0

推荐答案

add style =position：absoluteto footer div like this：

add style="position: absolute" to footer div like this:

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

这篇关于jQuery Mobile和一个固定的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！