AJAX もりもり使いました的なね，Windows アプリっぽく， ブラウザのサイズを変えるとそれに合わせて画面内の HTML パーツの配置とかサイズも追従するような， そんな感じのやつを作ってたですよ．

ヘッダ

コンテンツ

フッタ

まぁよくあるこんな感じのレイアウトで．

で， Event.observe( window, 'resize', windowResize ) とかやって，windowResize() で $('hoge').setStyle({ height:'～～px'}) っと．

～～の部分を ( document.documentElement.clientHeight - ヘッダの縦幅 - フッタの縦幅 ) にすればおｋ．

……とか思ってた時期があたしにもありました．

Firefox では普通に動くんだけど，IE だとｳｺﾞｶﾅｰｲ．動かないってのとは違うな，何かものすごくデタラメに動く．

初回の読み込み時は期待通りに動いたと思ったら，ウィンドウを最大化すると動かなくて，元に戻すとやたら小さくなったり，もう一度最大化するとさらに小さくなったり．

alert() とか仕込んで調べてみたら，どうもリサイズのたびに， 毎回取得していた「ヘッダの縦幅 - フッタの縦幅」の値が毎回テキトーに変動している模様． いや中身変えてないんで変動されちゃ困るんですけど……

とりあえず泥縄的に，初回に縦幅を取得して固定でやってみる． そしたら IE7 は期待通りに動くようになったが， IE6 は何だか……こう，リサイズにはきちんと追従するんだけど， 位置がおかしい．設定したサイズの倍くらいのスペースを取ってる気がする．

倍くらいに見えるので値を /2 してみたら，すげえぴったりになった． つまり 2倍だったんだ．そういえばなんか IE6 で縦幅が 2倍になるバグとか聞いたことがあるぞ……

というわけで検索して出てきた「IE6でよく遭遇するCSSのバグとその解決方法」のページさん． でそこからさらに，「IEでのCSSのバグを回避するhasLayout」．

なんかちょっと前に hasLayout の話題を読んだ気がしたが忘れていた．

hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。

とか理解できなかったんだけど． でもこれをいじっていて少し理解した気がする．

つまり，hasLayout:true なエレメントは， 自分のサイズ（縦幅やら横幅やら）を保持していて， それをもって周囲のレイアウトに対して影響を及ぼす側にある．

逆に hasLayout:false なエレメントは， 自分自身のサイズってものに主張がなくて， 周囲に押されるままにサイズを変えようとする．

今回，height を設定しても期待したようにならなかったり， あるいは height を取得しようとしても変な値が返ってきてたのは， そいつが hasLayout:false だったから「自分自身の height 値」に自信がなかったんではなかろうか．

で，hasLayout:true にするための設定も上記ページに． この中だと width:any value とか zoom:1 あたりが使いやすそうなので， その辺を設定してみる．

……うまくいったヽ( ´∀｀)ノ

調子に乗って *{zoom:1} とか設定したら，symfony のツールバーが変なサイズになったりしたｗ とりあえず上記の話からして，「流し込まれたレイアウト以外のレイアウトを強制したい相手」にのみ設定してやればよさそうだ．

つか IE7 でもこれ影響してるみたいなんすけど…… IE8 でもあるのだろうか？ Firefox とかではこんなんなしできちんとレイアウトを変更できてるんだし， こんなん気にせずに自由に使えるようになってほしいもんだなぁ……