2007年10月31日 09:57
CSS Happy Lifeさんの記事で、目からウロコ的な記事を見つけたので、自分でも備忘録的にCSSを書いてみました。
※すいません、ちょっとIE6でレイアウトが崩れてたので修正しました(;´д｀)
「3カラムすべてで背景の長さを揃える2」のサンプルはこちら
「3カラムすべてで背景の長さを揃える」のサンプルはこちら
大雑把に説明すると、3カラムすべてを囲ったボックス要素に、overflow:hidden;を適用させて3カラムすべてに大きな下paddingを設定し、さらにそれをネガティブmarginで相殺する、というもの。
▼EntryMore▼
上記の指定をして、3カラムとも下に十分伸ばしてやります。
そうすることで、3カラムのどれか1つ長くなっても、他のカラムの高さもそれに追従する、という形になります。
（ただ、背景画像を使って、下部分の形が違うものはできないかも・・あくまで背景色だけでカラムを装飾する場合にのみ使えそうです）
ちなみに、32768という数値は（自分で調べたわけではないですが）どうやらIEの限界値らしいです。なので、この数値にしておくのがよいかと。（こんな大きなコンテンツはそうそうないでしょうし）
トラックバックURL
http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/47
©2008 CSS-EBLOG. All Rights Reserved
コメント
1 - ヒュン さん
こちらの記述で3カラムすべてで背景の長さを揃えたのですが、
印刷をかけようとすると真ん中が印刷されなくなってしまいました。
これを対処する方法はあるのでしょうか？？？
2008年3月 1日 09:56
2 - えど
さん
>>ヒュンさん
コメントありがとうございます！
印刷ですか・・。ちょっとそれは試してなかったです・・。
家にプリンタがないので、印刷のチェックができないのです・・。
すみませんが、対処法などは現時点では分かりません(;´д｀)
2008年3月 1日 17:54