垂直可滚动的 div 没有重叠的父级答案

【问题标题】：Vertically scrollable div without overlapping parent垂直可滚动的 div 没有重叠的父级
【发布时间】：2016-12-14 02:20:58
【问题描述】：

我正在尝试创建一个可滚动的 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；然而，它与父级重叠并且无法滚动。

我做错了什么/错过了什么？

【问题讨论】：

标签： html css scrollable

【解决方案1】：

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

【讨论】：

【解决方案2】：

只需将值为 scroll 或 auto 的溢出属性放在父级上即可。

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

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

【讨论】：