CSS粘性底部 - 带边距

Question

CSS粘性底部 - 带边距

5

我正在尝试应用Sticky Footer的方法：http://code.google.com/p/cleanstickyfooter/。它非常有效，但是我遇到了一个问题。我的网站设计在页面顶部有34px的边距。因此，我尝试了几种实现方法，如使用body {margin-top:34px}或使用container {margin-top:34px}。然而，在这两种情况下，Sticky Footer都会出错。当我试图补偿34px时，似乎总是无法正常工作。你有什么想法吗？这里是一个Fiddle示例：http://jsfiddle.net/jrZKb/。

- djt

1

你能展示一下你的网站或者你特定代码的问题示例吗？ - Explosion Pills

1

如果您能够发布您网站的链接或创建一个示例，我们将能够更好地提供帮助。 - Arbel

好的，这是一个 Fiddle：http://jsfiddle.net/jrZKb/ - djt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alyce · Accepted Answer

使用现代清洁的CSS粘性页脚，它在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;
}