>
& lt;/div>
注: このレイアウトを使用するための前提条件は、フッターが一般的な div コンテナの外側では、フッターはレイヤーを使用し、他のすべてのコンテンツは一般的なレイヤーを使用します。本当に他の兄弟レイヤーを追加する必要がある場合、この兄弟レイヤーは絶対位置指定にposition:absoluteを使用する必要があります。
Web ページ制作入門 Webjx の記事: CSS のシンプルさは学習のしやすさにあり、CSS の難しさはより良いソリューションを見つけることにあります。 CSS の世界では、完璧というものは存在しないようです。したがって、今回紹介する CSS は絶対的な最下位であり、私がこれまで見てきた解決策の中で最も完璧な解決策にすぎません。
CSS コード:
以下は、下部がウィンドウの下部に表示されるようにするためのメイン CSS コードです:
html, body, #wrap {height: 100%;}
body > {height : auto; min-height: 100%;}#main {padding-bottom: 150px;} /* フッターと同じ高さを使用する必要があります*/
#footer {position:relative;margin-top: -150px ; / * フッターの高さの負の値*/
height: 150px;clear:both;}
注: 注意する必要があるのは、#main のパディング値、フッターの高さ、および負のマージン値を指定する必要があることです。一貫性を保つこと。
とてもシンプルですが、まだ終わっていません。メインでフローティング レイアウトを使用している場合は、ブラウザの互換性の問題をいくつか解決する必要があります。ここでは、Google Chrome に焦点を当てます。
#main セクションで有名な Clearfix ハックを実行します:
.clearfix:after {content: ".";
height: 0;
clear: Both;visibility: hidden;}
.clearfix {display: inline-block;}/* IE-mac から非表示にする */
* html .clearfix { height: 1%;}.clearfix {display: block;}
/* IE-mac から非表示にするのを終了 */注: このソリューションは 2 列のフローティング レイアウトでテストされており、Google Chrome を含むすべての主要なブラウザと互換性があります。
追記:
インターネット上で以前からよく知られていたフッター レイアウトは Ryan Faits によって作成されましたが、そのメソッドでは HTML コード内に空の div レイヤーが含まれます。厳密に言えば、セマンティック Web コード標準には準拠していません。 また、A List Apart の Exploring Footers という記事もありますが、これには JavaScript コードが使用されています。 この比較では、上記の一見単純な純粋な CSS がはるかに優れているように見えます。