CSS页脚，停留在页面底部而非屏幕底部

Question

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

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

CSS
#footer{ 
bottom: 0;
}

所以要简化问题：如何在页面底部放置页脚而不是屏幕。

Answer 1

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

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

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

Answer 2

你认为粘性页脚？ ：）

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

footer {
 position: relative;
}

Answer 3

如果你得到html并且无法手动修改它，你可以使用JS（和JQuery，但没有它可以）：jsFiddle

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

Answer 4

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

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

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

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

这里发生的是页脚会占据3em的高度，但是你会拉动＆＃39;它返回相同的值，但为负margin-top。它是clear以确保双方都没有元素，但您可以将其排除在外。

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