THE HAM MEDIA BLOG

高さの違うブロックを同じ高さにする方法は既に沢山でているのですが、
jQueryでできないかなって考えてみて、作ってみた。
これを使えば、内容量によってブロックの高さが変わっても、
自動的に揃えることができます。

SameHeight

今回はダウンロードできるようにしました。
リンク先を保存で保存して利用してください。

ダウンロード：jquery.sameHeight.js

動作を確認したブラウザは
Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。

そのうち、SafariとChromeは設定によって若干うまくいかない時があるようです。

使い方

jQueryが無いと動かないので、ダウンロードしてきてください。
そして今回のプラグインもダウンロードしておく。

そして二つを利用するために、head内に記述。

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

そして利用したい部分のHTMLはこんな感じ

<div class="sameHeight">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</div>

divじゃなくてもいいのですが、外側をブロック要素で囲んで、
その要素のclassにsameHeightというクラスを指定することで利用できます。

CSSの設定によってはうまく揃わなかったり、
ブラウザで表示が違ったりしますが、その時は教えていただけたらと思います。

サンプルは下記の通りです。

サンプル（paddingの値が全て同じ場合）

■プラグイン未適応

■プラグイン適応

サンプル（paddingの値が違う場合）

■プラグイン未適応

■プラグイン適応

サンプル（divの内側のpにpaddingが設定されている場合）

■プラグイン未適応

■プラグイン適応

これは単純に高さを揃えるブロックの内側の要素にpaddingがついていても、
特に問題がないよというだけのこと。
marginであっても同じ。

サンプル（divの内側のpにpaddingがemで設定されている場合）

■プラグイン未適応

■プラグイン適応

これも単純に高さを揃えるブロックの内側の要素にpaddingがついていて、
その指定がemでの指定であっても、特に問題がないよというだけのこと。
これまたmarginであっても同じ。

サンプル（divにpaddingがemで設定されている場合）

■プラグイン未適応

■プラグイン適応

この場合、SafariとGoogle Chromeでの表示がうまくいかない。
高さは揃うものの、padding分のきちんとした広さが確保できない状態になる。
Firefox3、IE6、IE7、Opera9は問題なく表示される。

SafariやChromeにも対応させる場合はemではなく、
pxでpaddingを指定するようにしてもらいたい。

ちなみに、今後対応するかは未定です。

ダウンロード

Download：jquery.sameHeight.js

作ろうと思ったきっかけ

同じようなプラグインにSetting Equal Heights with jQueryというのもあるのですが、
自分でも最初から作ってみようかなと思って作ってみました。
ただ、作りたくても思うようにうまくいかないものですね。
paddingを指定していて、さらにはブロックそれぞれに違う値を指定していたら揃わなかった。
同じにしたいブロックで違う高さを指定するということはまずないと思うけど、
それでもIEでうまいこと揃わなかったので、結局paddingの高さを取得することで揃えた。

でもこれだと、さっきも書いたのですが、SafariとChromeでemを指定していた場合は
うまく高さ確保されないことが判明した。
これさえうまくいけばどのブラウザのどんな状況でも揃えられるのかなと思ったり・・・

何かバグなどがあれば教えてください。