Question

我想要一个始终被推到页面底部的页脚。因此，当页面内容较短时，页脚将位于屏幕底部，如果内容较长，则页脚将后面的内容。我该怎么做？

注意：我不是在寻找data-position="fixed"。

2 ^nd编辑：还有其他方式可以得到我想要的吗？我试过了Ryan Fait's trick但不幸的是，它对我没用。页面无法再滚动。那么，还有其他方式吗？

Answer 1

您可以设置jQM内容div的min-height属性来完成此操作。下面，SetMinHeight函数计算内容div的最小高度，该高度将填充给定的设备高度。然后你可以在pagecontainershow上调用它，每当窗口调整大小或方向改变时：

$(document).on("pagecontainershow", function () {
    SetMinHeight();
});

$(window).on("resize orientationchange", function () {
    SetMinHeight();
});

function SetMinHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

这是 DEMO

尝试在演示中调整面板的大小，当内容不再适合屏幕时，您会看到页脚只会关闭。

Answer 2

是的，它应该是jquery移动兼容且安全。

您可以使用名为Ripple

的精美Chrome扩展程序在移动设备上测试您的网站

Ripple extension, Can be found here！

此扩展程序的有趣之处在于您还可以使用chrome开发人员工具进行动态调整。许多设备的多个仿真器选项。

jQuery移动页脚推到页面底部

2 个答案: