HTML5タグと自動サイズ変更用のDiv

Question

私は解決策を望んでいますが、最悪の場合のシナリオでは、divがサイズ変更されていない理由を説明しています。

私は以下のhtmlを持っています。私の 'section'タグ内のコンテンツが大きくなると、divもページコンテンツのクラスと同じになります。しかし、ナビゲーションメニュー項目が増加すると、divのサイズが変更されません。

<div class="page-content"> 
    <nav> 
     <ul>{menu items here}</ul> 
    </nav> 
    <section id="main"> 
     {bunch of text here} 
    </section> 
</div> 

ここは私のCSSです。

.page-content 
{ 
    display: block; 
    position:relative; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url(images/bg-home-main.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 

} 

    nav { 
    display: block; 
    float: left; 
    padding: 15px; 
    position: relative; 
    margin: 0px 0px 0px -45px; 
} 

#main { 
    padding: 5px 25px 5px 25px; 
    margin-left: 175px; 
} 

問題は、divにはnavとsectionの両方の背景をカバーする背景画像があることです。しかし、これは、セクションのサイズに合わせてdivが伸びるので、私のセクションの面積が私のnavよりも大きい（上から下へ）場合にのみ発生します。しかし、私のnavエリアが大きければ、それは実際にdivの外に広がり、イメージのためにそこに広がります。

Answer 1

要素をフローティングすると、フローから取り除かれ、要素を含む 要素は展開されません。 1つの回避策は、 オーバーフローを追加することです。収容要素に供給する。

オーバーフローの使用：非表示。は、clearfixの一形式です。これは、格納されている要素を展開して、フローティングされた要素を表示させるための修正です。実際にオーバーフローの任意の値が動作しますが、オーバーフロー：autoはMac上のエクスプローラでスクロールバーを表示します（実際に誰かがそれを実際に使用しているかどうかはわかりません）。オーバーフロー：scrollは同じ問題であるスクロールバーを引き起こします。 IEのいくつかのバージョンでは、これを動作させるために幅の値を含める必要もあります。浮動小数点型の要素の後ろに何らかの要素を挿入して、浮動小数点型の要素をクリアしたり、含まれている要素がその要素を含むようにしたりすることも含まれます。divは高さがなく、クリアされています。擬似要素ですが、私は通常、オーバーフローを使用しています。これは、任意のプレゼンテーションマークアップを追加しないためです。