5

スティッキー フッターのこのメソッドを適用しようとしています: http://code.google.com/p/cleanstickyfooter/

うまく機能しますが、問題が 1 つあります。私の特定のサイトのデザインには、ページの上部に 34px の余白があります。だから私はそれを実装する方法をいくつか試しまし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 に答える