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;

}

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

1 个答案: