HTMLでのディビジョンの拡大

Question

私はラップディビジョン内で左と中央の2つのディビジョンを持つHTMLページを作成しています。中央の部分にはコンテンツが含まれ、左にはナビゲーションメニューがあります。 問題は私の中間部がテキストを含んでいるので拡大しています、私はナビゲーションの高さを真ん中のものと同じにしたいと思っていました。次のように

htmlページは次のように

<div id ="wrap"> 
<div id="left"> 
##navigations menu 
</div> 
<div id="middle"> 
##content 
</div> 
</div> 

私のCSSは、

#wrap{ 
color: #000; 
background: #fff; 
margin: 0px auto 0; 
width:800px; 
} 
#leftnav{ 
float:left; 
width:181px; 
min-height:600px; 
padding:10px; 
margin-left:11px; 
background-color:#CCC; 
} 
#middle { 
float:left; 
width:538px; 
min-height:580px; 
padding:20px; 
margin-left:10px; 
} 

は、誰もがこの問題で助けることができる、ありますか？

Answer 1

Faux Columnsがあなたの必要を満たすかどうかを確認してください。

Answer 2

これを行うには魔法の解決策はありません。 CSSは、他の要素の高さに応じて要素の高さを調整するものではありません。は完全に独立しています要素です。

回避策を引き続き使用できますが、これらの回避策はすべて悪いであることに注意してください。

• テーブルレイアウトを使用します。はい、それはうんざりですが、期待した結果が得られます。
• ドキュメントの準備ができたら、JavaScriptで高さを調整します。もちろん、あなたのユーザーの中にはJavaScriptを有効にしていないものもあります。
• デザインを変更してください。たとえば、左側のパネルの背景が黒色で、幅が200ピクセルの場合、中央の辺に黒い200ピクセルの境界線を設定し、残りのスペースを塗りつぶして、左側のパネルを浮かせて境界線を浮き上がらせることができます。

親とも<div/>で試してみることもできます。たとえば、左側のサイドパネルに境界線が必要な場合は、ページの高さ全体を塗りつぶし、境界線を親の<div/>に設定し、左の境界線を中央の分割要素に設定することができます。