Question

我在移动网站上使用jQuery Mobile（v1.4.5。）在固定页脚上遇到了一些小问题。

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

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

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

任何人都知道解决方法吗？

Answer 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

jQueryMobile：固定页脚故障

1 个答案: