2008.12.12

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

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

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

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

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

$(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をガシガシ使いたい人は使ってみてください。

posted on 2008.12.12 11:08am

Comment and Trackback

Trackback URL

コメントはまだありません。