floatを使ったカラムの高さを揃える
CSSの「float: left」でボックスを横に並べ、2カラム3カラムの構成にすることが増えてきた。
しかし、それぞれのカラムは内容の情報量に応じて高さが可変するため、カラムの高さが揃わないという大問題が起きてしまう。
↓このように
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
「#container」：親ボックスのid
「#right_column」：右カラムのid
「#left_column」：左カラムのid
#container {
width: 300px;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
float: left;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
float: left;
}
そこで、
親ボックスと背景を同色にするとか、
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
#container {
width: 300px;
}
#left_colmun {
text-align: center;
width: 200px;
background: #eeaaee;
float: left;
}
#right_colmun {
text-align: center;
width: 100px;
background: #eeaaee;
float: left;
}
高くなりそうなカラムにボーダーを付けるとか（この場合は左カラム）、
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
#container {
width: 300px;
}
#left_colmun {
text-align: center;
width: 200px;
background: #eeaaee;
float: left;
border-right: 1px solid #333;
}
#right_colmun {
text-align: center;
width: 100px;
background: #eeaaee;
float: left;
}
各カラムに「min-height」を設定するとか、
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
#container {
width: 300px;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
float: left;
min-height: 150px;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
float: left;
min-height: 150px;
}
各カラムは色指定せず、カラムの境界付近で塗り分けた画像を親ボックスの背景にするとか、
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
#container {
width: 300px;
background-image: url(background.png);
}
#left_colmun {
text-align: center;
width: 200px;
float: left;
}
#right_colmun {
text-align: center;
width: 100px;
float: left;
}
将来的には「display: table」「display: table-cell」を使うと良いとか（IE7以前非対応）、
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
#container {
width: 300px;
display: table;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
display: table-cell;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
display: table-cell;
}
親ボックスに「overflow: hidden」
各カラムに「padding-bottom: 32768px」「margin-bottom: -32768px」
で強引にとか、
#container {
width: 300px;
overflow: hidden;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
あきらめて「table」 タグを使うか、
|
左カラム AAAAAAAA AAAAAAAA AAAAAAAA |
右カラム |
様々な方法を試してきたが、
最近ハマっているjQueryで実に簡単にできてしまった。
左カラム
AAAAAAAA
AAAAAAAA
AAAAAAAA
右カラム
$(function(){
var height = $('#container').outerHeight();
height = height + 'px';
$('#right_column').css('height',height);
$('#left_column').css('height',height);
});
カラム内に「padding」が指定されていると、高さがうまく取得できないことがあるようだ。その場合は、「height = height + ‘ 足りないピクセル数 ‘ + ‘px’;」で良いかも。
「JavaScriptをオフにしていると効果がない」という声も聞かれるが、最近はJavaScript前提で構築することがほとんどだから気にしないことにしよう。