IEのばか
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/visualren.html#height
heightにバグがある。
要素の高さが,コンテナブロックに明示された高さを越える場合(コンテナブロックの高さが内容量によってではなく heightプロパティによって与えられる場合),はみ出した内容が収まるようにボックスの高さを拡張して整形してしまいます。
とのこと、mxwikiの整形で相当はまった。
実際には
div#main,div#header,div#footer,div#right,div#left { position: absolute;} div#header,div#footer,div#right,div#left { overflow: auto; } div#main { overflow: scroll; } /* width */ div#header { left: 0%; width: 100%;} div#left { left: 0%; width: 20%;} div#main { left: 20%; width: 60%;} div#right { left: 80%; width: 20%;} div#footer { left: 0%; width: 100%;} /* height */ div#header { top: 0%; height: 10%;} div#left,div#main,div#right { top: 10%; height: 80%;} div#footer { top: 90%; height: 10%;}
これで、中段がの高さが80%を超えるときに配置がでたらめになるというか下に飛び出る。まさに「内容が収まるようにボックスの高さを拡張」されてしまった。
こういう構成はやめたほうがいいな・・・
もうちょっと練り直そうっと
解決策
上位のBOXであるBODYに以下を定義すればよい。
body {overflow:hidden;height: 100%;}
あーつかれた。
ということで修正
mxwiki自身を久しぶりに修正。
ちょっとだけ、cssっぽくなった。