CSS粘滞页脚 - 带边距 [英] CSS Sticky Footer - With Margin
问题描述
我尝试应用粘滞页脚的此方法: http://code.google.com/p/cleanstickyfooter /
I'm trying to apply this method of the Sticky Footer: http://code.google.com/p/cleanstickyfooter/
它工作得很好,但是,我有一个问题。我的特定网站的设计在页面的顶部有一个34px的边距。所以我尝试了几种实现它的方法,或者通过 body {margin-top:34px}
或者执行 container {margin-top: 34px}
。
It works great, however, I have one problem. The design for my particular site has a 34px margin at the top of the page. So I've tried a few ways of implementing it, either by doing body {margin-top:34px}
or doing container {margin-top:34px}
.
但是,在这两种情况下,Sticky Footer都搞乱了。
However, in both cases, the Sticky Footer gets messed up. When I try to compensate for the 34px, it doesn't ever seem to work out.
任何想法?
这里是一个小提琴示例: http://jsfiddle.net/jrZKb/
Here's a Fiddle example: http://jsfiddle.net/jrZKb/
推荐答案
使用 Modern Clean CSS Sticky Footer ,它的工作(在FireFox和IE9):
Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and 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粘滞页脚 - 带边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!