jQuery Auto Heightで各カラムの高さを同じに設定する

jQuery Auto Height とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。 3カラムのデザインで高さを調整したいなんて言う場合も多いのではないでしょうか。

サンプル

複数のボックスの高さを最大値にそろえるjQueryプラグイン

ファイルのダウンロード

Downloads – jquery-auto-height – Google Code

設置方法

以下のソースをhead内にそのまま貼付けます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function(jQuery){
    jQuery(揃えたいセレクタ).autoHeight();
});
</script>

例として、左カラム、センターカラム、右カラムの３つ全てを揃えたい場合は、各カラムを以下のように設定します。今回は揃えたいものに「.column」というクラスを割り当てます。

<div id="leftColumn" <strong>class="column"</strong>></div>
<div id="centerColumn" <strong>class="column"</strong>></div>
<div id="rightColumn" <strong>class="column"</strong>></div>

上記のhtmlに合わせて、スクリプトのセレクタを設定します。今回は「.column」です。 これで設定は完了です。 他にも、細かい設定が可能になっているので、今回と違う形でボックスの高さを揃えたい場合なんかは、以下のサイトさんなんかで勉強してみるといいと思います。

参考サイト

http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html