続・日記のヘッダとフッタをCSSで固定表示にしてみた
前回(日記のヘッダとフッタをCSSで固定表示にしてみた)の続き。
「はてなダイアリー」はIEを後方互換モードにさせるため、IEの対応は不可能と前回あきらめてしまいましたが、今回無事WinIEでの固定表示に成功しました。(IE6/IE7(RC1)で確認)
対応できたのはid:Billさんからのコメントで後方互換でも{position:fixed;}もどきは可能であるとの指摘を頂いたことがきっかけです。後方互換モードはやっかいなだけというイメージでしたが、こんなにも奥の深いものだとは思いませんでした。(でも標準対応して下さい > はてな)
今回は以下のようなCSSを追加して後方互換IEに対応させました。(これらは逆に標準モードでは使えません)
まずbodyのpaddingで余白としてヘッダとフッタの領域を確保する。overflowはhidden。
* html body { padding-top: 64px; padding-bottom: 18px; overflow: hidden; }
そのbodyの子要素である日記本体の.hatena-bodyがスクロールバーを持つように設定。positionはrelativeにしないとスクロール領域の下部がフッタに隠れてさらに画面外にはみ出ることになります。
* html .hatena-body { height:100%; position: relative; overflow: auto; }
あとは.hatena-bodyの外にある要素を、bodyが確保しておいた領域に{position:asbolute;}を利用してヘッダ、フッタとして配置します。例えばタイトル部分のh1はヘッダとして以下のように設定しています。
* html h1 { position: absolute; top: 0px; left 0px; z-index: 1; width: 100%; height: 64px; font-size: 32px; }
以上です。
アルファチャンネル付PNGでやってる表現の対応はまた後で。