WEB標準レイアウトDiv+CSS高さ適応方式_html/css_WEB-ITnose

高さの適応の問題。Div + CSS を 3 列または 2 列のレイアウトに使用する場合、具体的な高さが事前にわからないため、多くの場合、コンテンツの増加または減少に応じて高さを適応することができます。場合によっては2列(または3列)のDivが必要で、以前はTableを使えば高さは簡単に実現できましたが、Div+CSSを使うとさらに面倒です。一般的なアプローチは、背景画像の塗りつぶしまたは JS スクリプト コントロールを使用して、各 Div の高さを同じにすることです。これは次のように記録された解決策です。 「ネガティブアウターパッチ」の組み合わせ方法、サンプルコードは以下の通りです:

< html XMLns ="http://www.w3.org/1999/xhtml" >

< head >
< meta http-equiv = "Content-Type " content ="text/html; charset=utf-8" /> < Div + CSS の例、Wayhome のブログ " >


< div id ="wrap" style ="width:#FFFF00;" > :left;width:100px;background:#FF0000;" > 左
< div id ="sidebar_mid" style ="float:left;width:100px;" >
中間

中間
< br / >
中間 スタイル ="float:right;width:100px; :#0000FF; " > 右