memocarilog

複数カラムのレイアウトでボックスの高さを揃える方法です。

CSSで高さを揃える方法もあるようですが、jQueryやjavascriptを使用する方法が無難で実用的なのでしょうか。heightLineと、jQuery Auto Heightを使ってみました。

使用してみた感じではjQueryのほうはサイトを開いた瞬間元の高さが表示されてその後揃えるので一瞬カクっとなってしまいました。heightLineは読み込みも早く、カクッとなる事なく最初からその高さのように揃えてくれました。heightLineのほうが安心して使えます。

配布先

jQuery Auto Height
heightLine（作成者様サイト）

使い方

•heightLine（作成者様のサイトに詳しい使用方法もあります。）
head内でjsファイルを読み込みます。

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

下記のような感じで、揃えたい要素に『heightLine』というclass名を付けます。

<div id="main" class="heightLine"></div>
<div id="side" class="heightLine"></div>

•AutoHeight
head内に下記のように読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryAutoHeight.js"></script>
<script type="text/javascript">// <!&#91;CDATA&#91;
jQuery(function($){
    $(#揃える要素名,#揃える要素名).autoHeight();
});
// &#93;&#93;></script>