适用于jQueryMobile的Sticky-Footer

Question

描述我正在寻找的内容的最佳方式是以下主题。

Make div stay at bottom of page's content all the time even when there are scrollbars

不同之处在于我想在底部使用类似stackoverflow的页脚，但使用jQueryMobile框架。这可能吗？

我已经成功地尝试了另一个线程中的技术用于不使用框架的网站，但我认为框架会强制div进入绝对位置并且它变得非常混乱，我不确定最好的方法这样做？

感谢任何帮助。

Answer 1

我找到了问题的答案。

[data-role=page] {
  min-height: 100%;
  position: relative;
}
[data-role=content] {
  margin-bottom: 80px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px /* 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 */
  padding-bottom:60px;
}

我做了尼克在这里找到的答案的变体：Jquery Mobile Sticky Footer

我改变的是使用边距而不是填充，这样当不需要时，内容的大小不会增加。