我正在尝试应用粘性页脚的这种方法:http://code.google.com/p/cleanstickyfooter/
效果很好,但是我遇到了一个问题。我的特定网站的设计在页面顶部有 34 像素的边距。所以我尝试了几种实现它的方法,通过 body {margin-top:34px}
或 container {margin-top:34px}
。
然而,在这两种情况下,Sticky Footer 都会变得困惑。当我尝试补偿 34px 时,它似乎永远不会成功。
有什么想法吗?
这是一个 fiddle 示例:http://jsfiddle.net/jrZKb/
最佳答案
使用 Modern Clean CSS Sticky Footer ,它正在工作(在 FireFox 和 IE9 上):
<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;
}
关于CSS 粘性页脚 - 带边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15893275/