「css ヘッダ フッタ 固定 」というキーワード

事実上、無理です

いきなりこんな結論で大変申し訳ないのですが、お仕事で使うにはちょっとおすすめできません。　なにしろ、CSSで固定配置といえば「position:fixed」ですが、既に調べていらっしゃった（と思われる）通り、Internet Explorer（以下IE）6以下のバージョンでは使えないプロパティです。

逆に言えば、IE7（標準モード）以上+その他のモダンブラウザのみがターゲットであれば、苦もなく実現できますね。

IE6には独自拡張「expression」を使う

でも、「できません」で終わらすと記事になりませんので、見出しの通り独自拡張を使って実装してみます（とはいえ、私も実務で使ったことありません）。

概要

• postion:fixedを使えるブラウザでは、CSSの仕様通り実装
• かならず標準モードでレンダリングさせるよう、DOCTYPEに注意
• postion:absoluteを使う
• IE6以下には独自拡張の「expression」を使う

こんな感じで実装していきます。

サンプル

とりあえず、今回書いたのはこんな感じです。

今回のHTML概要

<ul class="header">
・・・
この部分は画面上に固定
・・・
</ul>
<div class="document">
・・・
この部分は通常フロー
で、ヘッダ・フッタ分の余白を上下に
・・・
</div>

<div class="footer">
・・・
この部分は画面下に固定
・・・
</div>

こんな、実際には使えない「ページの先頭へ」やコピーライトが固定されててもウザイだけだと思いますが、まあ、サンプルなので勘弁してください。

CSS（IE6以外）

 

.header {
position:fixed;
top:0;
left:0;
}
.footer {
position:fixed;
bottom:0;
left:0;
}

固定配置に関連するところだけ抜き出すと、こんな感じです。
書くまでも無かったかな。。。あとは、本文のとこにヘッダ・フッタ分の上下余白を持てばOK。

CSS（IE6）

* html {
overflow-y:hidden;
width:100%;
height:100%;
}
* html body {
overflow-y:auto;
width:100%;
height:100%;
}
* html .header {
position:absolute;
top:expression(eval(document.documentElement.scrollTop+0));
}
* html .footer {
position:absolute;
bottom:expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

expressionだけじゃなく、overflow-yも使ってみました。
ヘッダの方は大丈夫だと思いますが、フッタはなんだか良く解らない事をしてるように見えると思います。
最後の処理は、画面の高さが奇数の時に1pxずれるのを解消している感じです。

結果＆注意事項

• なんか、スクロールバーの上の方が隠れちゃうな。。。
• JavascriptなのでJSが無効の時は無効（JS無効の時のCSSを別で書いておく必要があるかも）
• パフォーマンスの低いマシンだったり、内容によっては、ウィンドウをリサイズしてる時にチラつく

という訳で、「使わないだろうな。。。」という感想と共に、得意の中途半端さを発揮しつつ、ここまでにしておきます。
気になる方は「expression ヘッダ　固定」とかで検索すると良いでしょう（っていい加減すぎ？）

たぶん、チラつくのをなんとかする方法とかも出て来ると思います。