Question

我想在Jquery Mobile中使用页脚，但这不是固定的，但始终位于页面的底部。

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

因此，页脚应显示在内容的末尾或屏幕的底部，以较低者为准。

有关如何处理此事的任何想法？

修改：

基本问题是，我似乎无法通过data-role=content获取实际占据屏幕整个高度的div。

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

结帐this SO：

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

找到示例和文档

Jquery Mobile Sticky Footer

3 个答案: