如何让页脚始终位于页面底部？答案

【问题标题】：How to have footer always at the bottom of page?如何让页脚始终位于页面底部？
【发布时间】：2011-11-24 03:47:39
【问题描述】：

我的页面没有包含很多信息，所以页脚显示在页面中间的某个位置。我怎么能一直在底部？

【问题讨论】：

如果您的查询与 HTML 有关，请尝试 jsfiddle.net/9eYa8。
谢谢，我的问题是关于 jquery mobile 的。

标签： jquery-mobile sticky-footer

【解决方案1】：

jquery 移动方法 - <div data-role="footer" data-position="fixed">

【讨论】：

当我的页面比移动视口长时，这对我没有帮助。我希望为短内容页面固定页脚，但在较长页面的内容底部，而不是覆盖在内容顶部。

【解决方案2】：

{
  potition: absolute;
  bottom: 0;
  width: 100%;
  height: some_height;
}

【讨论】：

谢谢。实际上我刚刚找到了 jquery 移动方法 - <div data-role="footer" data-position="fixed">

【解决方案3】：

这不是固定位置的页脚。如果页面内容高于屏幕，页脚将在屏幕外。我觉得这样更好看。

body 和 .ui-page min-height 和 height 是防止页脚在过渡期间上下跳跃所必需的。

适用于目前最新的 JQM 版本 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

【讨论】：

【解决方案4】：

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

【讨论】：