jQuery を使って要素の高さを揃える方法

高さがバラバラの要素達を Javascript を使って揃える方法です。
横並びのカラムの高さを揃えたい時に使います。

デモ

デモページ

↑のように、1ページ内に高さを揃えたいグループを複数設置することもできます。

HTML

<div class="fixBox">
	
	<div class="fixItem">
	テキスト
	</div>
	
	<div class="fixItem">
	テキスト<br>
	テキスト<br>
	テキスト<br>
	テキスト
	</div>
	
	<div class="fixItem">
	テキスト<br>
	テキスト
	</div>
	
</div>

高さを揃えたい要素にクラス「fixItem」を指定します。
それを親要素「fixBox」で囲みます。

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(window).load(function() {
	$('.fixBox').each(function(i, box) {
		var maxHeight = 0;
		$(box).find('.fixItem').each(function() {
			if ($(this).height() > maxHeight) maxHeight = $(this).height();
		});
		$(box).find('.fixItem').height(maxHeight);
	});
});
</script>

jQuery 依存なので、先に jQuery ファイルを読み込みます。
その下に上記のようにスクリプトを書きこみます。