流体布局底部的页脚

Question

我有一个流畅的布局,但结果是,当页面中没有足够的内容时,我的页脚继续向上移动,如本例所示.

保持页脚位于页面底部的流行解决方案是使用position: fixed或者position: absolute,当我这样做时,内容可能会在调整大小时与页脚冲突(您可以在此处看到我的意思.尝试调整窗口大小到位其中文本隐藏在页脚后面).

那么我怎样才能在底部获得一个页脚,而是以流畅的布局相应地移动页面的其余部分？

谢谢!

Answer 1

有一种 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 上也无法解决所述问题（页脚和内容重叠）。