3カラムすべてで背景の長さを揃える

カテゴリ：CSSテクニック 2007年10月31日 09:57

CSS Happy Lifeさんの記事で、目からウロコ的な記事を見つけたので、自分でも備忘録的にCSSを書いてみました。n

※すいません、ちょっとIE6でレイアウトが崩れてたので修正しました(;´д｀)「3カラムすべてで背景の長さを揃える2」のサンプルはこちら
~~「3カラムすべてで背景の長さを揃える」のサンプルはこちら~~

大雑把に説明すると、3カラムすべてを囲ったボックス要素に、overflow:hidden;を適用させて3カラムすべてに大きな下paddingを設定し、さらにそれをネガティブmarginで相殺する、というもの。n

▼EntryMore▼

#container { overflow: hidden;}#main , #sub , #sub02 { padding-bottom: 32768px; margin-bottom: -32768px;}上記の指定をして、3カラムとも下に十分伸ばしてやります。nそうすることで、3カラムのどれか1つ長くなっても、他のカラムの高さもそれに追従する、という形になります。n（ただ、背景画像を使って、下部分の形が違うものはできないかも・・あくまで背景色だけでカラムを装飾する場合にのみ使えそうです）

ちなみに、32768という数値は（自分で調べたわけではないですが）どうやらIEの限界値らしいです。なので、この数値にしておくのがよいかと。（こんな大きなコンテンツはそうそうないでしょうし）

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック