divコンテナの内部でオーバーフロー-yスクロールコンテンツが消えますか？

Question

私はdivのコンテナにいくつかの問題に直面しています。私は自分のコンテナに標準の高さを設定したい。 div内のコンテンツが大きい場合は、スクロールバーが横に表示されます。ここに私のコードの例である：ここでは

//In this section I have Navigation bar and HTML included. 
<section class="settingsBox"> 
    <nav class="xNavigationSetting"> 
     <a href="#" data-id="settingMain">Menu</a> | 
    </nav> 
    <div id="htmlSetting"> 
     <cfinclude template="Includes/hmSettings.html"> 
    </div> 
</section> 

<div id="settingMain" class="settingsBox"> 
    <div id="settingTesting"> 
     <fieldset> 
      <legend>Testing</legend> 
      <ul> 
       <li> 
        <span id="location">Test Location</span> 
       </li> 
       <li> 
        <span id="reason">Reason</span> 
       </li> 
       <li> 
        <span id="results">Results</span> 
       </li> 
      </ul> 
     </fieldset> 
    </div> 
    <div id="settingEquipment"> 
     <fieldset> 
      <legend>Equipment</legend> 
      <ul> 
       <li> 
        <span id="type">Type</span> 
       </li> 
      </ul> 
     </fieldset> 
    </div> 
</div> 
<div id="settingTbl"> 
    <div id="containerMaster"></div> 
</div> 

は私のCSSです：

div.settingsBox { 
    height: 400px; 
    overflow-y: scroll; 
} 
div.settingsBox fieldset { 
    font-weight: bold; 
    border: 2px solid #000099; 
    margin: 10px; 
} 
div.settingsBox ul li span:hover { 
    text-decoration: underline; 
    color: red; 
    cursor: pointer; 
} 
div.settingsBox ul { 
    list-style-image: url('../Images/edit.png'); 
} 
nav.xNavigationSetting { 
    width: 100%; 
    margin-left: 0; 
    margin-right: 0; 
    padding-top: 2px; 
    margin-bottom: 5px; 
    background-color: #c8e2db; 
    float: left; 
    border-bottom: 2px solid #000099; 
    height: 18px; 
} 
nav.xNavigationSetting a { 
    color: black; 
    text-decoration: none; 
    cursor: pointer; 
    font-weight: bold; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

私settingsBoxはscrollへ400pxとoverflow-yセットの高さを有します。何らかの理由で、このCSSを適用するとすべてのコンテンツが消えます。なぜ誰かが私のコード構造に間違っているかを知っていれば教えてください。ありがとうございました。

Answer 1

フロートをdiv.settingsBoxにクリアする必要があります。現在、ビューポートの外に浮かんでいます。

div.settingsBox { 
    ... 
    clear: both; 

}