Question

我正在尝试创建一个可滚动的div。我了解到我可以使用overflow-y: scroll来创建它，但是，当我尝试它时，在我的情况下它与父项重叠并且它不可滚动。

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;但是它重叠了它的父节点而没有滚动。

我做错了什么/失踪了？

Answer 1

只需将overflow属性的值设置为scroll或auto即可。

#parent {
 height: 100px;
 width:300px;
 background-color:red;  
 overflow: auto;
}

#child {
 background-color: blue; 
 height: 150px; 
 width: 250px 
}

Answer 2

将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>

垂直可滚动的div，不重叠父级

2 个答案: