jQueryを使ったカラムの高さを揃えるスクリプト[js]

cssnewbie.comより、jQueryを使ったカラムの高さを揃えるスクリプトの紹介です。
デモページはコチラから
js0812081.jpg

これには、jQueryが必要なので、ここよりjQueryをダウンロードしてください。

設置のしかたは、HTMLファイルのhead要素にjQueryを設置します。

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

さらに、head要素に以下のJavaSCriptのソースを埋め込むか、外部jsファイルとして設置するだけです。

JavaSCript


function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}
$(document).ready(function() {
	equalHeight($(".column"));
});

あとは、カラムの高さを揃えたいカラムに class="column"を以下のようにHTMLファイルに設置するだけです。

XHTML


<div id="col1" class="column">
<p>ABCDEFG</p>
</div>

<div id="col2" class="column">
<p>ABCDEFGHIJKあいうえおかきくけおこさすえ</p>
</div>

ためしに、やってみましたが見事に上手くいっています。
検証ブラウザは下記です。

  • Firefox3
  • IE7
  • Safari3.2

こちらが自分で行ったデモページです。

カラムの高さを揃えるのに、heightLine.jsという素晴らしいjsライブラリもありますが、こちらも使えるライブラリです。