Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介

メニューを開く

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」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

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

ページの先頭に戻る