jQuery Mobile 和固定页脚

Posted 2023-05-09

【中文标题】jQuery Mobile 和固定页脚

【英文标题】：jQuery Mobile and a fixed footer

【发布时间】：2011-10-31 09:21:48

【问题描述】：

我有一个用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

【问题讨论】：

这是一个 jquery 移动问题。暂时没有解决办法。

等待 b3, ... 和最终版本

即使在 1.0RC2 中它仍然是一个悬而未决的问题

【参考方案1】：

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

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

并将以下函数添加到您的点击事件中：

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

应该是这样的：

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

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

);

【参考方案2】：

我也有同样的问题。当用户单击显示导航按钮时，我的导航将被隐藏并显示。

问题是，JQM 计算并为页脚位置设置动画，而不是使用 position:fixed;底部：0；

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

【参考方案3】：

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

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

【参考方案4】：

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

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