カラムの高さをjQueryを使って簡単に揃える方法

複数のカラムでレイアウトを配置するとき、それぞれのカラムの高さを揃えるのって以外と難しかったりします。特にdiv要素を使ったブロック要素の場合です。

例えば、簡単な2カラムのサイトレイアウトでも、サイドバーの高さとメインコンテンツの高さを揃えたいけどどうすればいいの?ということがありますよね。

カラム(ブロック要素)の高さを揃える方法としてはCSSで揃える方法、jQueryのプラグインを使う方法、他にもたくさんあります。

ここでは、私が見つけたなかで一番簡単な方法を紹介します。

 

プラグインなしで、jQueryの少しの記載でカラムの高さを簡単に統一する方法

カラム高さ調節前の画像

順を追って説明します。

1. まずjQueryを使うので、<head>内にライブラリを読み込むコードを貼付けます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2.  次にJsファイルを作り次のコードを貼付けます。ファイル名は custom.jsにでもしておきましょう。(もちろん任意で変更できます。)

Jsファイルを保存する場所は、ページと同じ階層でもいいですし、jsフォルダを作ってそこに保存しても構いません。

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

3. Jsファイルを読み込むために<head>内にコードを書きます。

<script src="custom.js"></script>

4. 以下のコードを<head>内に貼付けます。

<script type="text/javascript">
$(document).ready(function(){
     equalHeight($(".col1"));
     equalHeight($(".col2"));
     equalHeight($(".col3"));
});
</script>

5. あとは、高さを合わせたいブロック要素にそれぞれ、col1,col2,col3とクラス名をつけてあげればOKです。

column_height2

これで完了です。

すごく、簡単ですね。