如何让我的页脚保持在 Stackoverflow 的底部？ [复制]答案

【问题标题】：How do I make my footer stay at the bottom as Stackoverflow's? [duplicate]如何让我的页脚保持在 Stackoverflow 的底部？ [复制]
【发布时间】：2014-02-27 12:46:34
【问题描述】：

我想知道如何让我的页脚像 Stackoverflow 一样粘在底部。

如果我给它一个位置：绝对和底部：0px；它停留在同一个地方。我也不想要一个位置：固定；一个。

我已经在网上搜索了一段时间，但找不到合适的解决方案。感谢每一个回答！

【问题讨论】：

StackOverflow 的页脚不这样做。
Sticky footer
您能否更具体地说明您希望页脚做什么？您的 StackOverflow 示例不清楚，因为 StackOverflow 的页脚没有做任何特别的事情......
好的，粘性页脚正是我所需要的，非常感谢你们！
http://www.cssstickyfooter.com/ 可能是最简单的方法。

标签： html css

【解决方案1】：

您可能正在寻找粘性页脚。你可以在CSS tricks找到一个例子

【讨论】：

好的，谢谢！我会在 8 分钟内接受答复。
目前这是评论，不是答案。答案应该包含足够的信息，它们可以独立存在。如果您要包含链接页面中的资源，请务必引用相关信息，以便在链接不再有效时保留内容。
哦，感谢您提到这一点，因为我仍然是 StackOverflow 答案新手。下一个问题会记住的。

【解决方案2】：

请通过以下链接查看工作示例：

Example 1

Example 2

Example 3

   #footer {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color:#CCC;
    color:#333;
    padding:20px;
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

您可以尝试将此 css 添加到页脚类中：

HTML：

<div class="footer">
   <p>Copyright 2013</p>
</div>

CSS：

.footer{
width: 100%;
position:relative;
bottom: 0; //fixes the footer to the bottom of the page.
height: 80px;
}

【讨论】：

【解决方案4】：

简单的答案是将clear: both 属性添加到您的CSS 页脚类中。

【讨论】：