我有一个容器 div，其中一个子 div 设置为相对于其父级的绝对位置。容器 div 有其最小高度设置，但是当子 div 的高度超出父级的高度时，父级不会拉伸。这是由于孩子的绝对定位所致。有什么想法可以让父母随着孩子身高的增加而伸展身体吗
#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>
您想要实现的目标显然是不可能的，只是因为一个简单的事实：当您向元素添加绝对规则时，您隐式地将其从正常布局上下文中取出。位于相对父容器中仅意味着它有一个已定义的框，该框将包含该元素并设置该元素的默认 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
