クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法
Art and web design by Matthew James Taylorというサイトで、
「Equal Height Columns with Cross-Browser CSS & No Hacks」
というエントリーがあがっていたので読んでみた。
高さを揃える方法っていろいろあるのですが、
この方法もクロスブラウザに対応しているので、なかなか便利かもしれないです。
カラムの数だけdivの入れ子
ここで紹介されている方法は、カラムの数だけ入れ子にして、
それぞれをずらして背景を表示させるという方法である。
↓図にしてみると、こんな感じ。
↓HTMLはこんな感じ(3カラム)
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
divをずらす
そしてCSSで手前にくる分のdivをずらす事で、後ろの背景を表示させている。
あとは、中身のコンテンツを今度はleft:○○%;で表示領域にもっていくことで表示している。
ちなみにIE6、IE7、Opera、Fx3、Safari3、どのブラウザでもきちんと表示された。
小さい部分部分で使う場合は何かしら注意が必要だと思うが、
高さを揃えるような場合には使ってみようと思う。
なかなかおもしろいですね。
これ見て思ったんですけど、再現するのにdiv要素を何重にもするのは、果たして良いのだろうかとおもいますが・・・CSSだけで横幅可変+見た目の高さ維持を実現するとなると、現状はマークアップを犠牲にしたトリッキーな対策が必要なんですねぇ・・。
コメントありがとうございます！
divを何重もの入れ子にするのは良いのかどうかについて、シンプルさを求めるならダメでしょうけど、それを求めないのであれば、このくらいならありなのかなと思います。
CSSだけでの実現はこの技術をみても、難しいことですよね。特に横幅も可変となるとなかなかないので、この技術はいいなって思います。