html - CSS 粘性页脚在主包装器上带有 margin-top

Question

我一直在使用 http://ryanfait.com/sticky-footer/在页面顶部需要边距/填充之前，它会很好用。我正在使用的设计有一个带图案的主体，所有页面内容都在一个从顶部开始 15 像素的白色框中。我仍然需要一个固定在底部跨浏览器上的页脚。有什么想法吗？

更新:

感谢所有的想法，但注释非常有效。向包装器的子元素添加边距会放入一个不必要的滚动条:工作示例:http://jsfiddle.net/cronoklee/p2cPD/

Answer 1

如果您愿意废弃一直使用的粘性页脚，下面是我从头开始制作一个的方法。

HTML

<div class="wrapper">
    <div class="content">
        ... Your Content Here ...
    </div>
</div>
<div class="footer">
    ... Your Footer Here ...
</div>

CSS

.wrapper {
    background: #eee;
    padding: 15px 0 100px;
}

.content {
    background: #fff;
}

.footer {
    background: #ccc;
    bottom: 0;
    height: 100px;
    left: 0;
    position: fixed;
    right: 0;
}

这应该可以跨浏览器工作。唯一需要注意的细微差别是 position: fixed 在 IE 6 中不起作用。欢迎任何改进:)