THE HAM MEDIA BLOG

クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
カラム
クロスブラウザ
CSS

クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法

Art and web design by Matthew James Taylorというサイトで、
Equal Height Columns with Cross-Browser CSS & No Hacks
というエントリーがあがっていたので読んでみた。

高さを揃える方法っていろいろあるのですが、
この方法もクロスブラウザに対応しているので、なかなか便利かもしれないです。

カラムの数だけdivの入れ子

ここで紹介されている方法は、カラムの数だけ入れ子にして、
それぞれをずらして背景を表示させるという方法である。

↓図にしてみると、こんな感じ。

クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法

↓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をずらす事で、後ろの背景を表示させている。

クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法

あとは、中身のコンテンツを今度はleft:○○%;で表示領域にもっていくことで表示している。

ちなみにIE6、IE7、Opera、Fx3、Safari3、どのブラウザでもきちんと表示された。
小さい部分部分で使う場合は何かしら注意が必要だと思うが、
高さを揃えるような場合には使ってみようと思う。

この記事へのコメント
こんばんは。

なかなかおもしろいですね。

これ見て思ったんですけど、再現するのにdiv要素を何重にもするのは、果たして良いのだろうかとおもいますが・・・CSSだけで横幅可変+見た目の高さ維持を実現するとなると、現状はマークアップを犠牲にしたトリッキーな対策が必要なんですねぇ・・。
Posted by Zoorasia at 2008年10月30日
>Zoorasiaさん
コメントありがとうございます!
divを何重もの入れ子にするのは良いのかどうかについて、シンプルさを求めるならダメでしょうけど、それを求めないのであれば、このくらいならありなのかなと思います。
CSSだけでの実現はこの技術をみても、難しいことですよね。特に横幅も可変となるとなかなかないので、この技術はいいなって思います。
Posted by ハム at 2008年10月30日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。