Jquerymobile页脚移动

Question

我使用jquerymobile作为android phonegap应用程序.我想创建一个粘贴在屏幕底部的页脚(所以它一直显示),即使你必须在页面上滚动.现在这工作了一半.当我在模拟器中测试它时,向下滚动页面并单击屏幕(使用鼠标),标题会跳起来(参见示例:http://tinyurl.com/pdv6nlp和http://tinyurl.com/p6xycr9

我的代码非常基础:

<div data-role="page" id="blog" style="background-image:url(img/bg_hdpi.png); background-repeat:no-repeat; background-position:top center; background-attachment:scroll; background-color:#d7d8d8;">


<div data-role="content">   
    <div id="contentTXT">
        <div id="outputblog"></div>
        <img src="img/spacer.gif" height="60" width="100">
    </div>  
</div><!-- /content -->

<div data-role="footer" data-position="fixed" >
    <div style="float:left;"><a href="#" onclick="history.back(); return false">back</a></div>
    <div style="float:right;"><a href="#foo" data-transition="flip">home</a></div>
</div>
</div>

有人能帮我吗？

Answer 1

如果你使用固定的css位置会破坏旧设备,如黑莓,旧款iphone和旧款android,因此仅适用于android 4.x.

要正确使用jquery移动属性,请在页脚中添加一个标记,以使其固定在屏幕底部.

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div><a href="#" onclick="history.back(); return false">back</a></div>
    <div><a href="#foo" data-transition="flip">home</a></div>
</div>

即使您滚动或点按正文,轻按切换也会保持页脚.

Answer 2

几行CSS应该解决这个问题:

position:fixed; 
bottom:0;

与您的页脚div一起使用内联:

<div data-role="footer" data-position="fixed" style="position:fixed;bottom:0;">