css - Jquery Mobile 粘滞页脚

Question

我想要 Jquery Mobile 中的页脚，它不是固定的，但始终位于页面底部。

像这样：http ://ryanfait.com/sticky-footer/ （但在 JQuery Mobile 中），不像标准的 JQuery Mobile 固定页脚。

所以页脚应该出现在内容的末尾，或者屏幕的底部，以较低者为准。

关于如何解决这个问题的任何想法？

编辑：

基本问题是，我似乎无法让 divdata-role=content实际占据屏幕的整个高度。

Answer 1

我主要使用 CSS 解决了这个问题。与公认答案相比，它的优点是它将处理页面显示后页面大小发生变化的情况（例如浏览器调整大小、方向更改，甚至更简单的情况，如可折叠/手风琴部分）。它的 Javascript 代码也少得多，也没有布局数学。

CSS：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-role=page] {
  min-height: 100%;
  position: relative;
}

[data-role=content] {
  padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}

[data-role=footer] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}

绝对页脚导致 jQuery Mobile 页面转换显示闪烁的页脚（尤其是“幻灯片”转换），所以我添加了少量的 Javascript：

$(document).live( 'pagebeforechange', function() {
  // hide footer
  $('[data-role=footer]').hide();
});

$(document).live( 'pagechange', function() {
  // show footer
  $('[data-role=footer]').show();
});

Answer 2

基本上，您只需要检查每个data-role="content"元素的高度，以确保在页眉/页脚/内容区域中使用了视口中的垂直空间。

例如：

$(document).on("pageshow", ".ui-page", function () {
    var $page  = $(this),
        vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();

    if (vSpace < $(window).height()) {
        var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
        $page.children('.ui-content').height(vDiff);
    }
});​

每次导航到页面时都会运行此代码。

这是一个演示：http: //jsfiddle.net/aBVtJ/1/

Answer 3

看看这个 SO：

jQuery Mobile 有一个支持固定或“粘性”位置的本机页脚。示例和文档可以在 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/找到