CSS粘性页脚，主包装上的页边距在顶部

Question

我一直在使用http://ryanfait.com/sticky-footer/ ，它的效果非常好，直到您需要在页面顶部添加边距/填充。 我正在使用的设计具有带图案的主体，并且所有页面内容均位于从顶部开始15px的白框中。 我仍然需要贴在底部交叉浏览器上的页脚。 有任何想法吗？

更新：

感谢您的所有想法，但注意效果很好。 在包装的子元素上添加边距会放入不必要的滚动条 ：工作示例： 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中不起作用。欢迎进行任何改进:)

Answer 2

好吧，我刚刚找到了这个线程，因为十分钟前我遇到了同样的问题，并且我想与我分享这个问题的解决方案，即“ 由我的header-div和margin- top：20px，因为我只希望它距页面顶部的20px ，这是我当时提出的。

只需将.content{margin-top:15px;}更改为.content{padding-top:15px;} ，它应该可以正常工作。 滚动条应消失，并且内容与顶部之间有一定距离。

如此处所示： http : //jsfiddle.net/p2cPD/24/

是的-它会扩展content-div的背景，但是如果您不希望出现在那儿，则可以使用某种透明的png或其他方式解决。

另外，根据http://ryanfait.com ， <div class="push"></div>应该位于wrapper-div的末尾，位于content-div之后，而不是content-div。

Answer 3

您能在身体上贴上边距吗？

body{
margin-top:15px;
}

此功能可在您链接到的页面上使用Firebug。

Answer 4

不添加滚动条的解决方案。 进行以下调整：

.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}

.download{
top:175px;
}