jQueryでブロックレベルの高さを揃える

jQuery2011年1月12日

ブロックレベルの高さを揃えるJavascriptは多く紹介されていますが、jQueryで容易に実現することが可能です。
以下の3通りの条件で高さを揃えたサンプルを作成してみました。

• クラスを付与した要素の中にあるdiv全ての高さを揃える
• クラスを付与した要素同士の高さのみ揃える
• カンマで区切った要素同士の高さを揃える

• 実際のサンプル

HTML

<div class="hoge-01">
<div>カラム1カラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラム</div>
<div>カラム2カラム2カラム2カラム2カラム2カラム2</div>
<div>カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3</div>
</div>

<div class="hoge-02">
<div class="hoge-equalize">カラム1カラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラム</div>
<div class="hoge-equalize">カラム2カラム2カラム2カラム2カラム2カラム2</div>
</div>

<div class="hoge-03">
<div class="hoge-L">カラム1カラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラム</div>
<div class="hoge-R">カラム2カラム2カラム2カラム2カラム2カラム2</div>
</div>

Javascript

'jQuery' in window && (function($) {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest){
tallest = thisHeight;
}
});
group.height(tallest);
}

$(document).ready(function() {
//.hogeの中にあるdivの高さを全て同じにする
equalHeight($("div.hoge > div"));

//.hoge-singleを付与された要素同士の高さを揃える
equalHeight($("div.hoge-single"));

//.hoge-Lと.hoge-Rの高さを揃える
equalHeight($("div.hoge-L,div.hoge-R"));
});
})(jQuery);

ただしページロード後にフォントサイズを変更するとそれに対して高さを揃えることはできないので注意。それでもありあまって気軽に高さを揃えることのできる便利なコードだと思います。

参考サイト

• jQueryで画像のロールオーバーを実装
• jQueryを他のライブラリと競合させないための方法

この記事を読んでいる方にオススメの記事

• jQueryニュースティッカーをjQueryで実装する／フルスクラッチ編
• jQueryjQueryで、透過pngをIE6に対応させる
• jQueryjQueryでアクセシブルなプルダウンメニューを実装
• jQuery今更聞けない！jQueryではじめるJavascript超初心者講座
• jQueryjQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する
• jQueryjQueryでタブメニューを実装（テキストメニュー版）

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。