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

你可以在身体上使用保证金吗？

body{
margin-top:15px;
}

这适用于您链接到的页面上的firebug。

Answer 3

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

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

.download{
top:175px;
}

Answer 4

好吧，我刚发现这个帖子，因为我十分钟前遇到了同样的问题，我想分享我的问题解决方案“由于我的垂直向下移动的页脚造成的不必要的滚动条margin-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中。

CSS粘性页脚，主要包装上有margin-top

4 个答案: