JAM 中的页脚位置位于屏幕底部？

Posted 2023-03-21

【中文标题】JAM 中的页脚位置位于屏幕底部？

【英文标题】：Footer Postion bottom of the screen in JQM?

【发布时间】：2013-07-08 04:12:41

【问题描述】：

所以我有这个应用程序，出于某种疯狂的原因，即使我使用的是 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>

【参考方案1】：

我认为您在所有页面上都缺少属性“data-id”，例如 data-id="sticky-footer" 以及 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 -->

【讨论】：

欢呼不知道为什么我一开始不工作，但现在接缝很好

首先你错过了 id ;-)