问fluid布局中底部的页脚

EN

有一种CSS方法可以做到这一点。或者至少有一个可以在我支持的所有浏览器上运行的浏览器(回到IE7)。

我使用负边距-顶部技巧将页脚粘贴到页面的底部。DIV包含整个页面内容，而不仅仅是页眉，这对大多数人来说已经足够了。假设DIV有一个类“除了脚注之外的所有东西”。然后，我强制页面至少为窗口高度。适用于大多数浏览器的完整版本：

html, body, .everything-but-the-footer {
    height: 100%;
}

.everything-but-the-footer {
    margin-top: -21px; // footer height + border * -1
    min-height: 100%
}

.footer {
    height: 20px;
    border-top-width: 1px;
}

.header {
    padding-top: 21px; // footer height + border
}

请注意，评论中列出的JSFiddle技术在IE上根本不起作用，在Chrome上也不能解决所述的问题(页脚和内容重叠)。

我不认为只使用CSS是一个合适的解决方案，但是你可以试着给你的主内容区域一个min-height。将其设置为安全高度，如果内容占用更多空间，它将相应地扩展。

试试这个，看看你是否在寻找类似的东西

http://jsfiddle.net/blackpla9ue/wCM7v/1/

这样做的目的是，如果内容区域比你的视区小，它会将页脚定位到视区的底部，如果它比视区大，它就会像预期的那样停留在内容的底部。一个事件被添加到resize事件中，因此即使您调整了浏览器的大小，它也会适当地定位自己。

为此，您可以使用技术。

检查这个：http://jsfiddle.net/tM445/5/