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

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

The EqualHeights jQuery Plugin
demo

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 も使えるみたいです（作者デモは auto を使っている）。300px を超えたらスクロールバーが出てきます。

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

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

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

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

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

関連投稿

• 透過 PNG を使う時に注意すること2
  category: CSS tags: IE6+JavaScript+透過 PNG.

posted on 2008.12.12 11:08am