[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート

ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。

Fixed Header & Footer Layout: A Beginner's Guide
demo

スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。

HTML箇所の最小構成は、下記のようになります。

<body>
<div id="header-wrap">
<div id="header-container">
<div id="header">ヘッダ</div>
</div>
</div>
<div id="ie6pagewrap">
<div id="ie6pagecontainer">
<div id="container">コンテンツ</div>
</div>
</div>
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">フッタ</div>
</div>
</div>

</body>