THE HAM MEDIA BLOG

ネタ元：[mixi] CSSテクニック | divの高さを100%に

複数のカラムを利用するときに、
コンテンツの量によって高さは変わってくる。

でも、高さを同じにして見た目を同じにしたい！
というケースに出会った事があるひとが多いのではないだろうか？

その場合まず考えられるのが、heightを指定して、同じ分px指定をする方法。
でもこの方法だと、コンテンツ量が変化するたびに変化させる必要があって面倒。

では、どのようにしたら高さを同じにできるのか？

調べてみたら様々な方法があるようなので、まとめてみた。

CSSで揃える - その１

揃える方法はいろいろあるが、まずはCSSで揃える方法。
一度画面がはみ出るくらい長くpadding-bottomを指定してmargin-bottomでその幅を縮小。
あとは親要素にoverflow: hiddenを指定して、必要な範囲だけにする方法である。

以下のサイトを参照してもらいたい。

• metal.ize » Blog Archive » Columnas 100% altas
• [CSS]高さの異なるカラムを揃えるスタイルシート | コリス
• 高さの異なるカラムをそろえるスタイルシート[to-R]
• ブロックレベル要素の高さを揃える｜CSS HappyLife

こういう方法もあるのか！という方法だと思う。
結構荒技な印象も受ける。

CSSで揃える - その２

これは単純に高さを揃えたいブロックを囲んで、
そこで片側の背景と同じものを指定するという方法である。

参照：段の背景色が切れないようにする - ［ホームページ作成］All About

floatとかした時は要注意かもしれないけど、
CSSで設定するならこの方法が一番かな？

背景画像で揃える

これはかなり汎用性が高くて、いろいろなサイトで使われている(たぶん)。

この方法は高さをそろえるというよりも、
高さが違っても、背景画像を使って視覚的に同じに見えるようにする方法である。

１つのカラムで背景を指定するのではなくて、
複数のカラム背景をまとめて指定してしまうことで、
一番高さのあるブロックの高さ分、全体にも背景がついて同じ高さに見える。

例としてはこんな感じ↓

段組レイアウトのお約束：段組ボックスの底辺を揃える（揃っているように見せる）

JavaScriptで揃える

これはJavaScriptとclassさえ指定しておけば自動的に高さを揃えてくれる方法。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

さすがは西畑さん、僕も使わせていただいています。
heightLine.jsは高さの揃えたいところで、
classでheightLineなどを指定することで高さを揃えることができる。

これと似たもので、jQueryを使うプラグインものある。

jQueryでブロック要素の高さを揃えてみる - 徒書

CSSよりもJavaScriptでの方が、
コンテンツの内容などに幅広く対応できるような気がする。
それぞれ使いやすい方法で設定をしてみてはどうだろうか。