css - 最小 - child 的高度设置为位置 :absolute

Question

我有一个容器 div，其子 div 设置为相对于其父级的绝对位置。容器 div 设置了最小高度，但是当子 div 的高度超过父级的高度时，父级会拉伸(stretch)。这是由于 child 的绝对定位。有什么想法可以让 parent 随着 child 的高度增加而拉伸(stretch)吗？

#parent{
 position:relative;
 min-height:200px;
 width:200px;
}

#child{
  position:absolute;
  top:0;
  left:0;
  min-height:150px;
}

<div id="parent">
 <div id="child"></div>
</div>

Answer 1

您想要实现的目标显然是不可能的，只是因为一个简单的事实，即当您向元素添加绝对规则时，您正在隐式地将其从其正常布局上下文中移除。处于相对父容器中仅意味着它有一个定义的框，该框将包含它并设置该元素的默认 x 和 y 坐标，默认情况下它是窗口，这就是为什么未将相对位置分配给父绝对定位的原因元素将相对于浏览器窗口的左上角。

现在，另一种方法是使用隐藏在父级中的溢出，并为剩余内容设置滚动条。请参阅我在 jsfiddle 上的示例:

#parent{
 position:relative;
 min-height:200px;
 width:200px;
 border: 1px solid #ccc;   
 overflow-y: scroll;   
}

#child{
  position:absolute;
  top:0;
  left:0;
  min-height:150px;
}

<div id="parent">
 <div id="child">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci sit amet eros hendrerit tristique. Mauris non felis purus, sit amet molestie dolor. Quisque iaculis ante ac massa suscipit fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel lectus urna, vel condimentum felis. In vel justo lorem, vel vulputate tortor. Morbi hendrerit erat at ipsum tempus ut sollicitudin nisi consectetur. Suspendisse potenti. Donec varius orci at mi consequat porttitor. Integer vestibulum convallis ultricies. Mauris imperdiet mauris nec nunc fringilla varius. Nunc molestie tempus mi, quis congue libero iaculis eget. Vestibulum a odio nisl. Mauris mollis consequat est, id porttitor metus semper sed. Sed magna lacus, pulvinar vel laoreet vel, dignissim at sem. Aliquam erat volutpat. Donec sit amet nibh sit amet arcu hendrerit facilisis. Nunc euismod, sapien eget fermentum sagittis, tortor felis varius velit, non tincidunt sapien diam in augue.</p> 
  </div>
</div>