我想在我的secundary
div
中添加滚动条,我添加了width
和height
:
#primary {
width: 100%;
height: 15%;
}
#secundary {
width: 100%;
height: 85%;
overflow: scroll;
}
<div id="primary">
<!-- content -->
</div>
<div id="secundary">
<!-- content -->
</div>
我尝试使用overflow: scroll
属性,但在secundary
div
中看不到任何滚动条。
仅当父元素具有固定的height
值时,height
的百分比值才有效。目前,#secundary
元素是body
的子元素,并且body
的高度设置为auto
- 这是默认值 - 这使得body
的高度根据其子元素的高度而变化。
您可以为#secundary
或body
定义固定高度值。
示例: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