Jquery 移动粘性页脚

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

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

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

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

Edit:

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

我主要使用 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();
});