css - Jquery Mobile 粘性页脚

Question

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

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

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

关于如何解决这个问题有什么想法吗？

编辑:

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

Answer 1

我主要使用 CSS 解决了这个问题。与接受的答案相比，它的优势在于它将处理页面显示后页面大小发生变化的情况(例如浏览器调整大小、方向更改，或者更简单的情况，如可折叠/ Accordion 部分)。它还具有更少的 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();
});