突然ですが。

もうFloatしたDivをいかにうまくレイアウトするか…
デザイン制約がありすぎて、僕、もう疲れたよ…パトラッシュ…


というくらいには、Floatしたカラムの高さをそろえるのが嫌いなマツモトです。

今回はちゃんと向き合うことにして、記事にしてみます。

どういうことかっていうと

こういうケース。


html

<div id="Header"></div>
<div id="SideMenu"></div>
<div id="MainColumn"></div>
<div id="Footer"></div>

css

#Header{/*css*/}
#SideMenu{
float:left;
height:auto;
}
#MainColumn{
float:right;
height:auto;
}
/*:afterでclearFloatする時もあるよ*/
#Footer{
clear:both;
}

もちろん、コンテンツがたくさんあってSideMenuの背景が足りない、とか左右逆のケースもあります。
で、これ、overflowすればheightはちゃんと伸びたように見えます。
それか、SideMenuとMainColumnの背景部分をつけない。とか、すればFooterは少なくとも蹴られますね。
今まではこれで良かった。

どっこい。どっこい

先日マツモトがやりたかったレイアウトはこれ。

positionで重ねたい。
しかも、MainColumnのWidthは%指定。
FooterはWidth:100%で繰り返し。
なのでちゃんと左右にリキッドでなくてはならず、
Footerに重なった部分だけを”見せかけ上”だけ置いておくのは不可。


そろそろ、対応策をきちんと覚えておこうぜ


というわけでGoogle先生に頼らせていただくと、さっそく出てきた。

Divの高さを合わせるスクリプト(safari対応版)

さーすーがーでーすーなー！
参考にさせていただいて、
ですが、マツモトのケースではSideMenuが場合によって表示しない時があるので、
この場合は高さが取得されないことになってしまいました。

なので、アレンジさせていただいた。
SideMenuの子要素Divがあった時だけ、という条件を足して、さらにそれ以外の場合にはheightを自動でつけるように足してます。

javascript

window.onload = function(){
//高さを合わせるIDを指定
var id = new Array("SideMenu", "MainColumn");
var idHeight = new Array();
var maxHeight = 0;
var sideMenu = document.getElementById("SideMenu");
if(sideMenu.getElementsByTagName('div').length > 0){//sidemenuにdivがあった時だけ
//指定IDの高さを取得
for(i=0; i < id.length; i++){
idHeight[i] = document.getElementById(id[i]).offsetHeight;
}
//最大の高さをmaxHeightに格納
for(i=0; i < id.length-1; i++){
maxHeight = Math.max(maxHeight, idHeight[i]);
}
//一番高いのに最少の高さを合わせる
for(i=0; i < id.length; i++){
document.getElementById(id[i]).style.minHeight = maxHeight + "px";
}
}else{
document.getElementById("MainColumn").style.height = "auto";//それ以外はheightを自動に
}
}

これでやりたいことができましたー！
Floatした時の高さについて挙動は、理論上は正しいと理解しているけど、やっぱりもうちょっと都合つけば良いのになー。とつい愚痴ってしまいますが、今のところは良い対処ができたかなー。と思います。

もっとこうしたらスマートでしょ！
などありましたら、ぜひコメントください～。


追記　2012/05/16
しまったぜ。このままだとMainWindowがコンテンツに応じて伸びない場合があるんだぜ。
なので、修正。失礼しますた。

javascript

//document.getElementById(id[i]).style.height = maxHeight + "px";
document.getElementById(id[i]).style.minHeight = maxHeight + "px";