页脚在JQM屏幕底部?

时间:2013-07-10 09:31:55

标签: jquery jquery-mobile footer sticky-footer

所以我有这个应用程序和一些疯狂的原因我的页脚不是坐在屏幕的底部,即使我正在使用data-postsion =“fixed”

任何想法?

继承我的代码和屏幕抓取,

<div data-role="footer" data-position="fixed" data-theme="f" >        
                <div data-role="navbar">
                    <ul>
                        <li><a href="#page12" data-role="button" data-icon="arrow-l" data-iconpos="bottom" data-inline="true">Previous</a>                          </li>
                        <li><a href="#menu" data-role="button" data-icon="home" data-iconpos="bottom" data-inline="true">Home</a></li>
                        <li><a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="bottom" data-inline="true">Next</a></li>
                        </ul>
                </div>
            </div>

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为你在所有页面上都缺少像data-id =“sticky-footer”这样的属性“data-id”,并且data-position =“fixed”。

  

要在转换之间使页脚持久化,请将data-id属性添加到所有相关页面的页脚,并为每个页面使用相同的id值。例如,通过将data-id =“myfooter”添加到当前页面和目标页面,框架将在页面动画期间将页脚锚点保持在同一位置。只有当页眉和页脚工具栏设置为data-position =“fixed”时,此效果才能正常工作,因此它们在转换过程中处于视图中。

结帐:Persistent Navbars on JQM.com

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
    <ul>
        <li><a href="a.html">Info</a></li>
        <li><a href="b.html">Friends</a></li>
        <li><a href="c.html">Albums</a></li>
        <li><a href="d.html">Emails</a></li>
    </ul>
</div><!-- /navbar -->