当 position:absolute child div 的高度增加时扩展父 div

【问题标题】：Expand parent div when height of position:absolute child div is increased当 position:absolute child div 的高度增加时扩展父 div
【发布时间】：2014-05-24 00:38:47
【问题描述】：

我有一个父 div 和 2 个子 div。

<div id="parent">
    <div class="child1 col-2"></div>
    <div class="child2 col-10"></div>
</div>

child1 是绝对定位的并且包含可折叠的项目。当我展开 child1 中的可折叠项目时，它的高度会增加。当页面加载后 child1 的高度增加时，如何增加 parent div 和/或 child2 div 的高度？ p>

【问题讨论】：

绝对定位会从页面流中删除项目，删除此定位可以解决您的问题。您的问题需要更多上下文。为什么child1绝对定位，你的目标和约束是什么？
Why doesn't the percentage width child in absolutely positioned parent work 的可能重复项
我使用 child 1 作为绝对定位，因为它已添加到项目的常见元素（python/django 模板）。有没有办法根据页面加载后孩子 1 的高度变化来增加孩子 2 的高度？

标签： jquery css

【解决方案1】：

你的第一个孩子（child1）的位置是绝对的，你需要计算第一个div的高度并给第二个div赋值

DEMO

HTML

<div id="parent">
    <div class="child1 col-2">Child1<br/>test1
        <a class="collapse" href="#">collapse</a>
        <div class="insideDiv">
            test inside
        </div>
    </div>
    <div class="child2 col-10">Child2</div>
</div>

CSS

.child1 {
    position:absolute;
}
.child2 {
    position:relative;
}
.insideDiv {
    display:none;
}

jQuery

var child1Height = $(".child1").height();
$(".child2").css('top' , child1Height); 

$(".child1 .collapse").click(function(){
    $(".insideDiv").slideDown(function(){        
        var countHeight = $(".child1").height();
        $(".child2").css('top' , countHeight);    
    });
})

【讨论】：