2008-12-12

要素の高さをそろえる jQuery プラグイン The EqualHeights jQuery Plugin

CSS Newbie というサイトで、簡単に要素の高さを揃えられる jQuery プラグインが公開されていました。

jQuery と jquery.equalheights.js を読み込み

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.equalheights.js" type="text/javascript"></script>

下記のように要素の高さを揃えたい箇所を指定すれば、内要素が異なる高さを持つ要素の高さを揃えられます。

$(document).ready(function() {
  $(".columns").equalHeights(100,300);
});

上記の記述では、column というクラス名がついた要素に対して高さを揃えます。
.equalHeights(100,300) の部分で min-height と max-height を指定できます。値として auto も使えるみたいです。300px を超えたらスクロールバーが出てきます。

既知のバグとして、要素内に画像を含み、その画像に height の指定がない場合、IE で正確に高さが計算できないことがあるそうです。その場合、スクリプトが高さをゼロとみなしてしまうようです。

また、いくつかのブラウザでリサイズ時にもう一度スクリプトを読まないといけない場合があるらしく、その場合は下記のようなスクリプトを書いてね、とのこと。

$(".columns").resize(function(){
  $(".columns").equalHeights();
});

ここまで書いておいて言うのもなんですが、こういう jQuery でやるのも楽だけど、~~ヨモツネットさんの記事（書籍などに紹介されていない display : inline-block について）~~ ( http://www.yomotsu.net/works/081016cssnite/ ) のほうが JavaScript に依存しないし、好きだな。

jQuery をガシガシ使いたい人は使ってみてください。