我一直在使用http://ryanfait.com/sticky-footer/，在您需要页面顶部的边距/填充之前，它的效果很好。我正在使用的设计有一个带图案的主体，所有页面内容都在一个从顶部开始 15 像素的白框中。我仍然需要一个粘在底部跨浏览器上的页脚。有什么想法吗？
更新：
感谢所有的想法，但注意工作完美。向包装器的子元素添加边距会放入 un-nessary 滚动条：工作示例：http://jsfiddle.net/cronoklee/p2cPD/
【问题讨论】：
如果您愿意废弃您一直在使用的粘性页脚，我将按照以下方式从头开始制作。
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 中不起作用。欢迎任何改进:)
【讨论】：
你能在正文上应用一个margin-top吗？
body{
margin-top:15px;
}
这适用于您链接到的页面上的萤火虫。
【讨论】：
不添加滚动条的解决方案。进行以下调整：
.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}
.download{
top:175px;
}
【讨论】：
好吧，我刚刚找到了这个帖子，因为十分钟前我遇到了同样的问题，我想分享我对“由我的header-div with 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 内。
【讨论】：