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順序付きリスト[Ordered List]の昇降を逆にする
• jQuery超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
• jQueryjQueryでローテーションバナーを実装
• jQueryjQueryを他のライブラリと競合させないための方法
• jQueryテーブルの偶数列に背景を自動で敷くスクリプト
• jQueryjQueryで印刷用ページを展開する

「jQuery」の他の記事を読む

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