向元素添加滚动条<div>


元素。

我想在我的secundarydiv中添加滚动条,我添加了widthheight

#primary {
width: 100%;
height: 15%;
}
#secundary {
width: 100%;
height: 85%;
overflow: scroll;
}
<div id="primary">
<!-- content -->
</div>
<div id="secundary">
<!-- content -->
</div>

我尝试使用overflow: scroll属性,但在secundarydiv中看不到任何滚动条。

仅当父元素具有固定的height值时,height的百分比值才有效。目前,#secundary元素是body的子元素,并且body的高度设置为auto- 这是默认值 - 这使得body的高度根据其子元素的高度而变化。

您可以为#secundarybody定义固定高度值。

示例:JSFiddle

试试这段代码:

https://output.jsbin.com/sugelod

#primary {
width: 100%;
height: 15%;
overflow: scroll;
}
#secundary {
width: 100%;
height: 85%;
overflow: scroll;
}

#primary {
width: 100%;
height: 15%;
}
#secundary {
width: 100%;
height: 100px;
overflow: scroll;
}
<div id="primary">
<!-- content -->
</div>
<div id="secundary">
text text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text
</div>

需要有内容的"溢出": https://developer.mozilla.org/en/docs/Web/CSS/overflow

最新更新