育てる箱は仕事をしません

私は右の内容が全体の包みを展開するように成長するために左の箱が好きです...私は垂直のスケーリングを意味する....水平ではありません！育てる箱は仕事をしません

reference page

私はそれがどこかにCSSの適否の問題だけだと確信しています...あなたは助けることができますか？

出典

2010-11-29 menardmam

ページを見ることで、私はあなたが求めているかを把握することはできません。どのボックスが成長する必要がありますか？ – Greg

浮遊物を避けるようにしてください。浮遊物は画像とテキスト用です。人々はしばしば、絶対的な位置付けがはるかに適切であるフロートを使用します。

基本的には、左ペインと同じ幅の右ペインに余白を追加します。次に、右ペインの上に左ペインを絶対配置し、高さをコンテナーの高さに合わせて100％に設定します。コンテナはコンテンツと同じ高さになります。ここで

はあなたのためのサンプルです：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
     body { width: 800px; margin: 0px auto; position: relative; } 

     #nav { 
     width: 200px; height: 100%; 
     position: absolute; left: 0px; top 0px; 
     background: #F00; 
     } 

     #content { 
     margin: 0px 0px 0px 200px; 
     heigth: 1000px; 
     background: #0F0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="nav"> 
    </div> 
    <div id="content"> 
    </div> 
    </body> 
</html>

出典

2010-11-29 22:06:56 Jan

あなたはおそらく「流体列レイアウト」（グーグル）を探している、とあなたが最も簡単にこのようなあなたのマークアップ何か配置することによって、これを達成することができますページ全体の幅が

<ul style="float:left; width:35%;"> 
    <li><a href="">Link 1</a></li> 
    <li><a href="">Link 2</a></li> 
    <li><a href="">Link 3</a></li> 
</ul> 
<div style="float:left; width:65%;"> 
    <p>Lots of content goes here</p> 
</div>

を（ブラウザのサイズを変更するなどして）35％と65％の幅要件を満たすために、両方の「列」が伸びます。上記は、Internet Explorer、要素のデフォルトのパディング/マージン、または浮動小数点のクリアランスを考慮していない簡単なサンプルマークアップです。理想的には、2つの列のスタイルはすべて「クラス」によって設定されます。 <div class="column-a">、およびすべてのクラスは外部CSSファイルで定義されています。

私が詳細に説明したい場合はお知らせください。

編集： [OK]をクリックして、左の列の背景色を下に伸ばして、「等しい高さの列」の視覚効果を与えますか？その場合はthis link is greatであり、知っていて試してみる必要があるすべてをカバーする必要があります。

出典

2010-11-29 20:38:23 danjah

私は垂直方向のスケーリングを意味する....水平ではない！ – menardmam

育てる箱は仕事をしません

答えて

関連する問題