フッタをページ最下部に固定する

今月発売のweb creators07年9月号の特集は「スタイルシート＆JavaScriptで表現するデザインパーツ62」でした。

そのなかで、webサイトのフッタをページの最下部に固定する、というものがありました。そういやそんなことが出来ることはずっと前に見知っていたけど、実際にどうやるかはきちんと考えたことがなかったと思った僕は、いい機会なので勉強がてらhtmlを書いてみることにしました。

webcreatorsで紹介されていたCSSの書き方は、ネガティブマージンや空DIVを置いていたりとなんだか個人的に好きくない書き方でした。position属性を使えば同じことが出来るんじゃないかと思った僕はその方向で進捗してみました。

書き上がったhtmlはこちら。

htmlとbodyのheightを100％に指定して、さらに大枠のDIVの高さもmin-height:100%;で広げてやります。モダンブラウザではこれでブラウザの表示画面サイズの大きさ分の高さが常に指定されるカタチになるようです。この縦いっぱいに広がったDIVの中に、bottom:0;の絶対配置でフッタを置けば、ブラウザの表示画面の高さよりも本文の高さが短い場合においてもフッタがページ最下部に固定されるようになります。また、フッタと本文が被らないように、本文にはフッタの高さと同等のpadding-bottomを指定してやります。

IE6ではmin-heightが適用されないので、スターハックでheight:100%;を指定してやったらうまいこと反応してくれました。このあたりの理屈はよくわかりません。

このやり方だとOperaでうまくいきません。これが今後一番の課題です。