javascript - 当一个div元素在其上方的另一个div元素的高度动态增加时，调整该div元素的位置

Question

我想在另一个 div 元素的高度动态增加时定位一个 div 元素，换句话说，我不希望第一个 div 元素在其高度增加时与第二个 div 元素重叠。我怎样才能做到这一点。

Answer 1

像这样:

function f() {
    $(".fchild").height("+=100");
}

.parent {
    width:50%;
    display:inline-block
    background-color:blue
}

.fchild {
    width:100%;
    height:100px;
    background-color:red;
}

.cchild {
    width:100%;
    height:100px;
    background-color:green;
}

.btn {
    position:absolute;
    bottom:0;
    right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="fchild">
</div>
<div class="cchild">
</div>
</div>
<button class="btn" onClick="f()">Increase height</button>

请注意，当您按下“增加高度”按钮时，红色框的高度会增加，但绿色框会向下移动相同的距离。我在这里所做的就是将两个 div 放在同一个具有动态高度的父 div 中。