jQueryMobile：固定页脚故障

Posted 2023-03-21

【中文标题】jQueryMobile：固定页脚故障

【英文标题】：jQueryMobile: fixed footer glitches

【发布时间】：2015-04-19 12:22:49

【问题描述】：

我在移动网站上使用 jQuery Mobile (v1.4.5.) 时遇到一些固定页脚问题。

当有很多文本（需要滚动）时，没有问题。 当文本很少（不需要滚动）时，没有问题。

当有足够的文本需要稍微滚动时，就会出现故障。发生的情况是页脚在向上滚动时消失并在释放时弹回。我正在 Chrome（Nexus 5 上的移动设备）上对此进行测试，我认为这与在 Chrome 中，chrome 的地址栏在滚动时消失的事实有关。向上滚动时，地址栏再次出现，导致页脚消失。

我从 jQuery Mobile 获取了固定页脚演示页面并删除了足够的文本以确保它不是我的代码，但即使使用此演示页面，问题仍然存在。

有人知道解决方法吗？

【参考方案1】：

您可以缩放页面以适应设备高度并使内容 div 可滚动（参见 Omar 的文章：https://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/），而不是使用固定位置的页脚：

<div data-role="page" id="page1">
    <div id="jqmHeader" data-role="header" >
         <h1>My page</h1> 
    </div>
    <div id="jqmContent" role="main" class="ui-content" >
       <!-- scrollable content here -->
    </div>
    <div id="jqmFooter" data-role="footer"> 
        <a href="#" data-role="button">Footer Button</a>
    </div>
</div>

function ScaleContentToDevice() 
    scroll(0, 0);
    var headerHeight = $("#jqmHeader:visible").outerHeight();
    var footerHeight = $("#jqmFooter:visible").outerHeight();
    var viewportHeight = $(window).height();

    var content = $("#jqmContent:visible");
    var contentMargins =  content.outerHeight() - content.height();

    var contentheight = viewportHeight - headerHeight - footerHeight - contentMargins;

    content.height(contentheight);
;

$(document).on( "pagecontainershow", function()
    ScaleContentToDevice();        
);

$(window).on("resize orientationchange", function()
    ScaleContentToDevice();
);

DEMO

【讨论】：

感谢您的回复。不过似乎对我不起作用，在 Chrome（移动）中也有滚动问题。