CSSの自動高さとスティッキーフッター

Question

私は、CSSのポジショニングガイドラインのまわりで私の頭をラップしようとしています。私はどのように固定フッタを作成するかを理解しようとしていますが、主要コンテンツ領域が圧縮されなくなったときには粘着性がなくなります。私が話していることの例は、http://ryanfait.com/sticky-footer/で見つけることができます。誰かが私になぜフッタが固着するのを止め、特にCSSの特性によってこれが起こるのか説明できますか？私にとって、CSSを見ると、フッタはブラウザのウィンドウの下に常に貼り付いているように見えますが、ここには該当しません。どうして？

ありがとうございます。あなたがラッパーの外にフッターを宣言し、フッターとマージントップのためのいくつかのheightを与える必要があり

Answer 1

はこの1を試しを与える必要があります。 http://www.cssstickyfooter.com/（リンクは無効になりました）

これはRyanのものに似ていますが、メモリから、私はこれでもっとうまくいったと思います（どちらも非常に似ていますが）。

Answer 2

は-(footer-height)px

<div id="wrapper"> 
    --- 
------ 
</div> 
<div id="footer"> 
</div> 

# wrapper { 
width:100%; 
height:100%; 
} 
#footer { 
width:100%; 
height:25px; 
margin:-25px 0px 0px 0px; 
background:#ccc; 
} 

Answer 3

は、ここで私はスティッキーフッターを必要とするプロジェクトのための基礎としてかなり一貫して使用したレイアウトの簡単な要約です。私が最初にどこからすべてのコードを入手したのかはっきりしていませんが、かなり長い間一緒につながっていました。

http://jsfiddle.net/biznuge/thbuf/8/

あなたはページ全体をラップする「#container」要素を必要とフィドルから見ることができるはずです。これはあなたに100％の高さを与えます（cssに存在するハックに注意してください）。そして、この 'container'要素の子要素は高さまたは相対位置を得ることができます。この方法の

落とし穴があります：フッターがさらに変位するように

• あなたは「#main」 要素の下部にいくつかのパディング/マージンを提供する必要があり、それが自然に だろう、そう必要性よりあなたのフッターの幅の少なくとも広い範囲を知るためには、 の高さが必要です。
• 水平 リサイズになるまでIEは、特定の場合には粘りが失敗すること で、あなただけのブラウザの下端のサイズを変更する場合 イベントのサイズを変更し、ブラウザを認識してする（< = IE8 9をテストしていません）は思えませんイベントとしても発表されました。
• あなたはレイアウトに固定幅をしたい場合、あなたはない「#container」要素のが、「#page」 要素にこの 制約を置き、そしておそらく提供 に「#footer」の下に余分な要素を導入すべきです任意の幅の制約があります。

Good Luck！