高さ：隠されたコンテンツ

Question

と拡張しないので、私はこのような等を含むdivの内部に含まれる3つのdiv有する次のよう

<div id="contain"> 
    <div id="leftnav"> 
    .... 
    </div> 
    <div id="todo"> 
    ... 
    </div> 
    <div id="rightcontent"> 
    .... 
    </div> 
</div> 

をCSSがある：

div { 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

#contain { 
    width: 1000px; 
    background: #ffffff; 
    display: block; 
    min-height: 500px; 
    height: auto; 
    max-height: 1500px; 
    overflow-x: hidden; 
    overflow-y: auto; 
    position: relative; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    } 

#leftnav, #todo { 
    float: left; 
    width: 20%; 
    display: block; 
    overflow: hidden; 
    height: 100%; 
    padding: 10px; 
    position: absolute; 
    left: -200px; 
    bottom: 0; 
    } 
#rightcontent { 
    float: right; 
    width: 100%; 
    display: block; 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 10px; 
    } 

#leftnavと#todoの位置づけは、ユーザーがリンクをクリックしたときに左の値に基づいて右にアニメートされ、正しいコンテンツが常に表示されるためです。しかし、これが問題の原因です。

#rightcontent divの内容に基づいて、高さを最大高さまで拡大するには、含まれるdivが必要です。それがそのままで、何があっても高さを500pxに保ち、スクロールバーを実装するだけです（私は発生したくありません）。たぶん私はこのすべての間違いに近づいているとオーバーフローを入れて：それに隠されても、何とか500pxに設定されています。

必要に応じてさらに詳しい情報を提供できます。前もって感謝します。

Answer 1

フロートに問題があるようです。要素を浮動させると、通常のレンダリングフローが解除されます。テストと同じように#contain divにfloat:leftを追加します。子divを含めるために展開されているはずです。

私は一般的にこのような理由でフロートを使用しないようにしています。