當位置高度：絕對子div增加時，展開父div

Question

我有一個父母div和2個孩子div。

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

child1的位置絕對正確，其中包含可折疊的物品。 當我在child1中展開可折疊項時，其高度會增加。 頁面加載后child1的高度增加時，如何增加父 div和/或child2 div的高度？

Answer 1

您的第一個孩子（child1）位置是絕對的，您需要計算第一個div的高度並為第二個div分配最高值

演示

的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);    
    });
})