私は同様の質問が出されていることは知っていますが、Googleの検索から逃げ出し、ほとんどすべてのstackoverflowの質問を実行していますが、まだこれを手伝ってくれていません。私はそれの中に1つまたは2つの列を保持するコンテナdivを持つ必要があります。コンテンツはCMSを介して読み込まれており、両方の列が含まれている場合と含まれていない場合があります。高さ100％の2列流体幅？
が存在する場合、右列が主本体コピーされるが左側の列には、NAVレールあろう。したがって、ナビゲーションが含まれていない場合、右の列はコンテナの幅の100％を占める必要があります。ナビゲーションレールにDOESが存在する場合は、左側の200ピクセルを食べ、残りの幅を占めるように右側の主要コンテンツを押し上げる必要があります。
私が直面している問題は、左側のナビゲーションレールが存在する場合、高さは左側のナビゲーションレールに100％をまたがるようになっています。
これは意味があると思います。
所望の結果はここにある：左パネルが挿入されていない場合、ここで、
http://www.freeimagehosting.net/uploads/60a01995ae.gif
を（私はまだ画像を投稿することができないので）と：
http://www.freeimagehosting.net/uploads/be5b69e9ec.gif
Iを200pxの左の列から残っている残りの幅を食べる権利の幅を指定することでこれを取得しました。
#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#left-col {
float: left;
width: 188px;
background-color: #d7d7d7;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 722px;
margin-right: -1px; /* Thank you IE */
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
<body>
<div id="container">
<div id="left-col">
<p>Left Rail Nav</p>
</div>
<div id="right-col">
<p>Primary content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
問題は、私は左のナビゲーションが含まれていない場合には100％と右側の列の幅を維持したいときに来ます。右側のコンテンツに100％の幅を追加すると、それが下部にドロップされます。
右の列の幅を変更する：これと同様に
#right-col {
float: left;
width: 100%;
margin-right: -1px; /* Thank you IE */
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
：http://www.freeimagehosting.net/uploads/fef22741e7.gif
私はこのスタイリングの純粋なCSSの方法があると考えているようになってきました。私はいくつかのjavascriptでそれを行うことができることを知っているが、私は本当に純粋な解決策を探したい。これは不可能ですか？
一つは、divを浮動し、100％の高さを適用する作業が、明らかではないかもしれないと思うだろう。以下のような
私はあなたにこのことを理解してもらうため、次のようにしました：しかし、うまくいきませんでした。 – W3bGuy
フロートと位置を取り除いた後は完全に機能しました。ありがとう!!! – W3bGuy
よろしくお願いします。 – jeroen