溢出-y滚动内容在div容器内消失？

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有400px高度和overflow-y设置为scroll。出于某种原因，所有内容在我应用此CSS时都会消失。如果有人知道我的代码结构中的原因或错误，请告诉我。谢谢。

Answer 1

您需要清除浮点数div.settingsBox。它目前在视口之外浮动。

div.settingsBox { 
    ... 
    clear: both; 

}