当内部具有绝对位置时扩展外部div答案

【问题标题】：Expand outer div when inner has position absolute当内部具有绝对位置时扩展外部div
【发布时间】：2015-04-23 15:24:36
【问题描述】：

当内部 div 定位为绝对（在具有相对位置的 div 内）时，外部 div 没有扩展。

我尝试了 clear:both / overflow:xxx / 和 height: auto 的各种变体。这对我来说似乎很简单，但不知何故它根本不像我期望的那样工作。我将其简化为：

<div class="jumbotron">
    <div class=" infobox">
        Test
    </div>
</div>

还有这个 css sn-p:

.jumbotron{
    background-color: #000;
    position: relative;
    min-height: 300px;
}
.jumbotron .infobox{
    background-color: #dddddd;
    position: absolute;
    bottom: 10px;
    width: 500px;
    height: 900px;
}

我想要实现的是让内部 div 从外部 div 的底部“长大”，并使外部 div 相应地扩展。

感谢任何帮助！

谢谢，达里奥

【问题讨论】：

这是不可能的。绝对定位的元素会从文档正常流程中移除，并且容器不知道它们的高度或宽度。
唯一的办法就是添加一些js。

标签： html css css-position absolute

【解决方案1】：

好的，感谢 cmets。

这样就解决了：

$('.jumbotron').height($('.infobox').height());

在文档的 onload 部分。

【讨论】：

【解决方案2】：

不是 100% 确定您在问什么，但看看 this fiddle 是否能帮到您。

使用 JQuery 获取和设置基于彼此的位置和高度。在创建文档和调整页面大小时触发。正如其他人所建议的那样，这样的事情需要JavaSCript。 JS如下：

$(function(){
    $('.infobox').offset($('.jumbotron').position());
    $('.jumbotron').height($('.infobox').height());
});

$(window).resize(function(){
    $('.infobox').offset($('.jumbotron').position());
    $('.jumbotron').height($('.infobox').height());
});

【讨论】：

【解决方案3】：

答案很奇怪，但肯定会奏效。

当内部 div 位于 absolute 位置时，只需在外部 div 上添加 overflow:hidden css（例如：这里 .jumbotron 是外部 div），您可以删除 min-height从外层div，外层div自动取内层div的高度。

(确保外部 div 不应该有任何特定的高度)

【讨论】：