Div + CSS 高さ適応ソリューション_html/css_WEB-ITnose

リダイレクト

ここ数日間、私は div+css を使用してウェブサイトを作成しました。 上、中央、下に 3 つの列があり、中央に左、中央、右の 3 つの列があります。高さは同じですが、たまたま背景の色が異なっています。その結果、IE、Firefox... これらの 3 つの列の長さがすべて不均等になります。

長い間デバッグして検索した結果、Div + CSS を使用して 3 列または 2 列のレイアウトを作成する場合、具体的な高さは事前に不明であり、高さはそれに応じて調整するしかありません。内容の増減 2列（または3列）の高さを同じにするのはTableなら簡単ですが、Div+CSSだと面倒です。一般的な方法によると、高さを同じにするために背景画像を埋めるか JS スクリプトを使用することがほとんどですが、これらは最良の方法ではないと思います...

以下では、「コンテナのオーバーフローを隠す」と「ポジティブインナーパッチ」と「ネガティブパッチ」 「アウターパッチ」の組み合わせ方法

メインコード:

#wrap{overflow:hidden;} /* 外側コンテナ*/
#sidebar_left,#sidebar_right{padding - bottom:100000px;margin -bottom: - 100000px ;} /* Column*/

完全なサンプルコード

< style type = " text/css "

<--

#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding -bottom:100000px;margin -bottom: - 100000px;}
-->

< ボディ >
< div id = " ラップ " スタイル = " width:300px; 背景:#FFFF00; " > div id = " サイドバー左 " スタイル = " float:left;width:100px; :#FF0000; " > 左 div > ; br />
中

中

中
中間