溢出-y滚动内容在div容器内消失?
问题描述:
我的div容器遇到了一些问题。我想在我的容器上设置标准高度。如果div内的内容很大,滚动条应显示在侧面。下面是我的示例代码:溢出-y滚动内容在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时都会消失。如果有人知道我的代码结构中的原因或错误,请告诉我。谢谢。
答
您需要清除浮点数div.settingsBox
。它目前在视口之外浮动。
div.settingsBox {
...
clear: both;
}
这是行得通!你知道什么导致了浮球在外面? –
在'nav.xNavigationSetting'上设置的浮点数会导致'div.settingsBox'环绕它 –