CSS 粘性页脚 - 带边距答案

【问题标题】：CSS Sticky Footer - With MarginCSS 粘性页脚 - 带边距
【发布时间】：2013-03-31 08:55:10
【问题描述】：

我正在尝试应用 Sticky Footer 的这种方法：http://code.google.com/p/cleanstickyfooter/

效果很好，但是，我有一个问题。我的特定网站的设计在页面顶部有 34 像素的边距。所以我尝试了几种方法来实现它，要么通过body {margin-top:34px} 要么通过container {margin-top:34px}。

但是，在这两种情况下，粘滞页脚都会搞砸。当我尝试补偿 34px 时，它似乎从来没有成功过。

有什么想法吗？

这是一个 Fiddle 示例：http://jsfiddle.net/jrZKb/

【问题讨论】：

您能否向我们展示您的网站或您的特定代码存在问题的示例？
如果您可以发布指向您网站的链接或创建一个小提琴来演示它，我们将能够提供更好的帮助。
好的，这是一个小提琴：jsfiddle.net/jrZKb

标签： css sticky-footer

【解决方案1】：

使用Modern Clean CSS Sticky Footer，它可以工作（在 FireFox 和 IE9 上）：

http://jsfiddle.net/jrZKb/1/

<body>
    <header> Header</header>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
header
{
    background-color: green;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: blue;
}

【讨论】：

哇，这太棒了。我以前从未见过这个。效果很好！
我也没有看到它，直到我当时用谷歌搜索它，它看起来确实不错......我想我可能会更新我自己的网站......