2011-10-07 9 views
8

私はコンテナがなく、ラッパーはありません。フッターの下に強制的に滞在しますか?

私は単純にそうようなレイアウトを持っている...私はやりたいと思っています何

<body> 

<div id="header"> 
</div> 

<div id="left"> 
</div> 

<div id="right"> 
</div> 

<div class="clear"></div> 

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

フッターは常に私はかなり遠くダウンしたコンテンツを持っているかどうか、画面の一番下にとどまることを確認することです画面の一番下までずっと移動するのに十分なコンテンツではありません。

今のところ、私は上記の2つの方法のいずれかを動作させることができますが、両方とも動作させたいと思います。

ここに私が設定したCSSがあります。

html { 
height: 100%; 
} 

body { 
height: 100%; 
position: relative; 
} 

#footer { 
position: absolute; 
bottom: 0; 
} 

私は、最小高さ:100%;コンテンツとしてのCSSドキュメント内のHTML要素に移動しますが、コンテンツがない場合は、それ自体が画面の一番下には表示されません。解像度は関係ありません。

私はこの問題に何度も遭遇しましたが、それを理解する方法は全くわかりません。だから、いくつかの説明と共に、いくつかの助けが大いに評価されるだろう。

ご協力いただきありがとうございます。

+1

'私はse'ごとしかし、最終的には、任意のコンテンツを持っていない場合内容があるはずなので、何が重要か。あなたのフッターが内容のすぐ下に比べて底にくっついているのは本当に誰も気にしません。私は人々がそんなに価値のない効果を達成しようと多くの時間を無駄にしている理由を知りません。 – animuson

+1

@animuson:底についていれば気になります。フッタが私のデザインの底にくっついていないと、ばかげて見えます。あなたの入力をありがとう。 :) –

+0

[ページ下部にフッターを固定する方法]の複製が可能です。(http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom ) –

答えて

8

使用この仲間は、それが本当によく説明し、従うことは簡単チュートリアルです:

GOOG le "sticky footer"、なぜこのテクニックが動作するのかを以下にリストアップしました この検索結果よりも優れています。

http://ryanfait.com/sticky-footer/ - このテクニックは似ていますが、 cleanStickyFooterはそれをはるかに凌駕します。フッターの幅を 100%にしたい場合は、 にあるテクニックはうまくいきません。

http://www.cssstickyfooter.com/ - このテクニックは、多くのうちでI です。これは、侵入型のCSSクリアハッキングと言います。

0

コンテンツの量にかかわらずコンテンツの下部に、またはコンテンツの量に関係なく画面の下部にフッターを添付しますか?

最初の場合、それを配置するのは気にしないでください。コンテンツの後ろにページフローがあるようにしてください。

第二は、位置を使用する場合:あなたは、もう少し明確にする必要があるかもしれない

を修正しました。何がスクロール?ヘッダ?左?右?フッター?あなたの全体のコンテンツの左と右の部分ですか?あなたの身体はなぜ相対的な立場ですか?あなたはなぜ「身長:100%」を持っていますか? HTMLのために?

http://code.google.com/p/cleanstickyfooter/

ベストスティッキーフッターは、これまでのサイトから本当に本当によく

引用作品(と私はcompletly同意):

+0

コンテンツの下部とコンテンツの下部にフッターを添付して、画面の下部に流れるコンテンツが十分でない場合は、画面の下部に貼り付けます、 それは理にかなっていますか?私はコンテンツの量にかかわらず画面の一番下に固定され、コンテンツ・ディビジョンの1つに適用されるマージンやパディングが必要となるため、固定位置を望んでいません。左と右が内容です、もっとそうです。 –

0

あなたはthis Artice by RyanFait

クロスブラウザに指定されたレイアウトを見てみることができますし、常に動作します:)

+0

Google from above ... http://ryanfait.com/sticky-footer/ - このテクニックは似ていますが、cleanStickyFooterはそれをはるかに上回ります。フッターの幅を100%にしたい場合、ここにあるテクニックはうまくいきません。 –

関連する問題