CSSスティッキーフッター - 私はスティッキーフッターのこの方法を適用しようとしている証拠金

付：http://code.google.com/p/cleanstickyfooter/CSSスティッキーフッター - 私はスティッキーフッターのこの方法を適用しようとしている証拠金

それは素晴らしい作品は、しかし、私は1つの問題があります。特定のサイトのデザインは、ページ上部に34ピクセルの余白があります。だから、body {margin-top:34px}を実行するか、container {margin-top:34px}を実行して、いくつかの実装方法を試しました。

しかし、どちらの場合でも、スティッキーフッターが台無しになる。私が34pxを補償しようとすると、うまくいかないように見えます。

アイデア？（FirefoxとIE9上）、それが働いてModern Clean CSS Sticky Footerを使用してhttp://jsfiddle.net/jrZKb/

出典

2013-04-09 djt

はあなたが私達にあなたのウェブサイトや、問題の一例を示すことができる。ここ

はフィドル例ですあなたの特定のコードで？ –

あなたのウェブサイトへのリンクを投稿したり、それを示すためのフィディルドを作成したりできれば、より良い結果が得られます。 – Arbel

申し訳ありません、フィドルです：http://jsfiddle.net/jrZKb/ – djt

：

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-09 04:54:13 Alyce

これはかなり素晴らしいです。私は以前これを見たことがない。本当にうまくいく！ – djt

私はちょうど私がそれをgoogledまでそれを見たことがなかった、それはよく見える...私は自分のサイトを更新するかもしれないと思う... – Alyce

CSSスティッキーフッター - 私はスティッキーフッターのこの方法を適用しようとしている証拠金

答えて

関連する問題