5

我正在尝试应用粘页脚的这种方法:http ://code.google.com/p/cleanstickyfooter/

它工作得很好,但是,我有一个问题。我的特定网站的设计在页面顶部有 34 像素的边距。所以我尝试了几种方法来实现它,无论是做body {margin-top:34px}还是做container {margin-top:34px}

然而,在这两种情况下,Sticky Footer 都会搞砸。当我尝试补偿 34px 时,它似乎从来没有成功过。

有任何想法吗?

这是一个小提琴示例:http: //jsfiddle.net/jrZKb/

4

1 回答 1

5

使用Modern Clean CSS Sticky Footer,它可以工作(在 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;
}
于 2013-04-09T04:54:13.317 回答