CSS页脚，停留在页面底部而不是屏幕底部答案

【问题标题】：CSS Footer, stay at bottom of page not bottom of screenCSS页脚，停留在页面底部而不是屏幕底部
【发布时间】：2015-08-30 01:06:05
【问题描述】：

我似乎找不到如何在页面底部而不是屏幕底部放置 div（页脚）。我看到的许多答案都说绝对或固定之类的东西，但这会将页脚带到屏幕底部和页面中间。

HTML
<div id="footer"></div>

CSS
#footer{ 
bottom: 0;
}

所以为了简短的问题：如何在页面底部而不是屏幕上放置页脚。

【问题讨论】：

【解决方案1】：

如果你使用 position:absolute;页脚将位于其他元素上，并且不会遵循页面的元素顺序。比，如果你使用 position:fixed;，确定它会处于 FIXED 位置，这不是你想要的结果。

所以不要使用绝对位置或固定位置；

如果您的页脚是页面的最后一个元素，它将自动成为页面的最后一个元素。

【讨论】：

【解决方案2】：

你认为粘页脚？ :)

或者你只是想在内容之后添加页脚，只需制作

footer {
 position: relative;
}

【讨论】：

【解决方案3】：

如果你得到了 html 并且不能手动修改它，你可以用 JS（和 JQuery 但没有它也可以）：jsFiddle

$(function() {
    $('body').append($('#footer').detach());
});

【讨论】：

【解决方案4】：

如果您没有为页脚指定任何样式并将其保留为正文内容之后的最后一个元素，它将保留在页面底部。

假设您的正文内容太短而无法覆盖页面的整个高度（无论出于何种原因，可能没有内容）但您仍希望将页脚保持在页面底部，您可以read this short tutorial 或@987654322 @。如果您的内容长于视口高度，此页脚仍将保留在页面底部，而不是固定在视口上。

基本上你需要让页脚上方的内容或容器占据视口高度的 100%。然后，使用以下 CSS 将页脚放在内容/容器之后：

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

这里发生的情况是页脚将占据 3em 高度，但您将其“拉回”为相同的值但为负 margin-top。 cleared 确保两边没有元素，但您可以排除它。

然后，为防止它与您的内容重叠，内容容器或内容本身应具有相同值的padding-bottom（在本例中为 3em）。

【讨论】：