在页面底部添加页脚答案

【问题标题】：Stick a footer to the bottom of the page在页面底部添加页脚
【发布时间】：2013-11-18 20:35:50
【问题描述】：

如何制作一个会粘在页面底部并随内容移动的页脚？我尝试使用position，但当内容超出屏幕大小时，页脚停留在屏幕底部，内容覆盖在其顶部。

【问题讨论】：

展示你尝试过的任何东西
这里重复：stackoverflow.com/questions/3443606/… - 你谷歌了吗？
为什么为什么为什么在这么多常见问题和帮助主题之后为什么要提出一个不完整的问题。我们不能在这里建立一个完整的页面。
为什么连答案都不断弹出：\

【解决方案1】：

我会为页脚创建 css 类 -

footer.bottom {
    position: fixed;
    bottom: 0px;
}

与 jQuery 相比

if ( $(document).height() < $(window).height() ) {
    $('footer').addClass('bottom');
} else {
    $('footer').removeClass('bottom');
}

所以如果body比window短，它会添加class使其粘在底部，但是如果body更高，那就正常了。

【讨论】：

【解决方案2】：

我想你正在使用 div 来制作页脚。你试过z-index CSS 属性吗？较大的z-index 会导致元素出现在前面。

只是一个尝试的建议。

【讨论】：

【解决方案3】：

这个方法解决了我的问题。我认为它应该解决所有与粘性页脚相关的问题。谢谢大家回答我的问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
footer.bottom {
    position: fixed;
    bottom: 0px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ( $('#x')[0].scrollHeight < $(window).height() ) {
    $('footer').addClass('bottom');
} else {
    $('footer').removeClass('bottom');
}
});
</script>
</head>
<body>
<div id="x">
<table height="1000" bgcolor="#999999">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

    <footer>
    Lorem Ipsum
    </footer>

</div>
</body>
</html>

【讨论】：

【解决方案4】：

如果你使用：

position:fixed;
bottom:0px;

应该这样做

如果你需要的话，还有width:100%;。

【讨论】：

但我需要始终位于内容之后的页脚。位置：固定页脚将始终固定在页面上..
请完整阅读问题：“我尝试使用位置。但是当内容变得大于显示器高度时，内容会覆盖在页脚上。”