CE CreativeSection

やぁ、☆サンゴーなり。

今日は備忘録。
cssの。


position:absolute; bottom:0;で、ドキュメントの下部にずっと張り付くフッターを作ったとする。
基本、ドキュメントの高さが可変することはあまりない。
だが、縦アコーディオンや何某かでドキュメントの高さが変更された(高くなった)場合、
この「absolute,bottom:0による下部張り付き」がIE6ではおかしくなる。

具体的には、ドキュメントの高さが変更されても、フッターが初期位置から動かない。
ドキュメントの下部に追従していかなくなる。

ブラウザのサイズを変更すると、忘れていたかのように下部へ移動する。

その解決方法(暫定)
入社9ヶ月目のKK(技術は神クラス)が発見してくれた方法は以下の通り。


・bottomを0ではなくautoにする。


これで、ドキュメントの高さが変更されても、フッターは下部に追従する。

ただ、これだけではうまく行かず、フッターの高さ分、ドキュメント全体を囲むdivの下に入り込んでしまう。
潜り込むのではなく、その高さ分のブロックがdivの下に隙間0で入る感じ。
bottom:auto;にすると、全ブラウザでその現象が起こる。

ので、cssハックを用いてbottom:auto;をIE6にだけ適用し、
さらにmargin-topもIE6にだけ適用する。
このmargin-topには、フッターと同じ高さの分だけネガティブマージンを入れる。

例えば、フッターの高さが100pxだった場合、このフッターに適用するcssのプロパティは以下の通りになる。


bottom:0;　//全ブラウザに適用
_bottom:auto;　//アンダースコアハックでIE6にのみ適用
_margin-top:-100px;　//こちらもIE6にのみ適用、フッターの高さ分ネガティブ


これで、望んだとおりの表示になる。

が、実際は完璧に上手くいくわけではなく、
本来の目的である、「コンテンツ内容が少なくてもフッターは常にドキュメント(ウィンドウ)の下部にある」がちゃんと機能しなくなる。
隙間開いちゃうんですよね。ははは。
恐らく、コンテンツの下にくっついてるんだろうなーと。
だから「暫定」。
もう少し突き詰めて、どうにかこうにか。
現状での解決方法として、ドキュメント高に可変が生じるページのフッターdivにstyle属性で上記のcssを適用するっていう方法もあったりする。
が、なんか負けた気がするので今回は採用見送り。

っていうか、生みの親(マイクロソフト)も見放したIE6にそこまで手をかけるアレもないっちゃぁないんですが、やっぱりレイアウトが崩れるような大きなバグ？を見つけたのなら放置はできまへんよね。
それに、未だにIE6ユーザーが半数近く占めているわけですし。

ホント、WEB屋泣かせです。。。

しっかしまぁ、文章で書くだけじゃすごく伝わりにくい事に今気付きました。
が、キャプチャ画像は無い！です。

あくまで備忘録。
その割にはダラダラ長いですが。


でわ。