jquery - 流体布局底部的页脚

Question

我的布局很流畅，但结果是，当页面中没有足够的内容时，我的页脚会一直向上移动，如 this example .

将页脚保持在页面底部的流行解决方案是使用 position: fixed 或 position: absolute，但是，当我这样做时，内容可以调整大小时与页脚发生冲突(您可以明白我的意思 here 。尝试将窗口大小调整到文本隐藏在页脚后面的位置)。

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

谢谢!

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 上也无法解决所述问题(页脚和内容重叠)。