私は基本的な構造を持っています
<div class="container">
<div class="sidebar">
</div>
<div class="content">
</div>
<div style="clear:both;"></div>
</div>
どこ.sidebar
に.content
いてfloat: left
SOであまりにも多くの回答を見てきましたが、それらはすべて.content
画面自体より大きくない場合にのみ機能します。私の問題を説明するために、この2つの例があります
http://jsfiddle.net/pleasedontbelong/h35vc/2/ (小さなコンテンツ) http://jsfiddle.net/pleasedontbelong/56C9v/1/ (大きなコンテンツ)
ご覧のとおり、.content
div が大きすぎるheight:100%
と、コンテナーの が機能しなくなります。
どちらの場合も、灰色の div は 100% の高さにする必要があります。私の推測では、ブラウザーは要素をフローティングする前にウィンドウの高さを計算します。
CSSだけで解決できるでしょうか?(私はJSでそれを行うことができましたが、あまりにも汚いようです)