垂直滚动div无重叠父
问题描述:
我想创建一个可滚动的div。我知道我可以用overflow-y: scroll
做到这一点,但是,当我尝试它时,在我的情况下它重叠了它的父项,并且它不能滚动。垂直滚动div无重叠父
HTML:
<div id="parent">
<div id="child"></div>
</div>
的CSS:
#parent {
height: 100px;
width:300px;
background-color:red;
}
#child {
background-color: blue;
height: 150px;
width: 250px
}
在这个例子中(这也是在bootply),我预计将维持蓝其父内,成为一个可滚动的div;然而相反,它覆盖了它的父项并且没有滚动。
我在做什么错误/缺失?
答
添加overflow: auto
于母公司
#parent {
height: 100px;
width:300px;
background-color:red;
overflow: auto;
}
#child {
background-color: blue;
/*height: 150px;*/
width: 250px;
color: #fff;
display: inline-block;
}
<div id="parent">
<div id="child">
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</div>
答
只需将父项的滚动值或自动值设置为溢出属性即可。
#parent {
height: 100px;
width:300px;
background-color:red;
overflow: auto;
}
#child {
background-color: blue;
height: 150px;
width: 250px
}