我有一个简单的2列布局，带有页脚，可清除标记中的右和左div。我的问题是我无法在所有浏览器中都将页脚停留在页面底部。如果内容将页脚放下，它会起作用，但情况并非总是如此。

更新：

在Firefox中无法正常工作。当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时，我在页脚下方看到一条背景色。不幸的是，这是页面的默认状态。

解决方案

回答

要获得页脚的粘性：

• 为内容添加一个带有<class =" wrapper"的<div>`。
• 在紧靠包装器的闭合器</ div>之前，放置<div class =" push"> </ div>。
• 在紧靠包装器的包装器</ div>之后，放置<div class =" footer"> </ div>。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

回答

尝试在内容和侧边栏周围放置一个容器div(带有overflow：auto)。

如果这不起作用，我们是否有任何屏幕截图或者示例链接，其中页脚显示不正确？

回答

一种解决方案是设置盒子的最小高度。不幸的是，IE(惊奇)似乎没有很好地支持它。

回答

将#footer的CSS设置为：

position: absolute;
bottom: 0;

然后，我们需要在#sidebar和#content的底部添加padding或者margin来匹配#footer的高度，或者当它们重叠时，＃footer将覆盖它们。

另外，如果我没记错的话，IE6的CSS(底部：0)有问题。我们可能必须对IE6使用JS解决方案(如果我们关心的是IE6)。

回答

我们可以在后面使用" position：absolute"将页脚放在页面底部，但是请确保两列都具有适当的" margin-bottom"，以使它们永远不会被页脚遮挡。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}