Question

我有一个容器div，其子div设置为相对于其父级的绝对位置。容器div具有其最小高度设置但是当子div的高度超过父级的高度时父级的doest伸展。这是由于孩子的绝对定位。有什么想法，我可以让父母随着孩子身高的增加而伸展

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

Answer 2

我认为你不能做你所要求的。您可以设置body, html: { height: 100%; }，然后将您的父div更改为height: 100%;，这样可以有效地执行您想要的操作。但是如果不了解其他HTML标记，就很难在这里提供一个明智的答案。

min - 将子设置为position的高度：绝对

2 个答案: