根据子元素的变化增加或减少父 div 高度

Question

https://jsfiddle.net/9b90twgf/15/

$("#add").on("click",function(){
var top = parseInt($("#parentDiv .childDiv:last").css("top").split("px")[0])+90;
$("#parentDiv").append("<div class='childDiv' style='position:absolute; top:"+top+"px;'>divvvvvv</div>");
});
$("#remove").on("click",function(){
$("#parentDiv .childDiv:last").remove();
});

#parentDiv
	    {
	     background: antiquewhite;
	     }
	    .childDiv
	    {
	    background: yellow;
width: 700px; 
height: 50px;
	     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="add">add</button><button id="remove">remove</button>
<div style="position: absolute; width: 700px; height: 210px;" id="parentDiv">
<div class="childDiv" style="position: absolute;">
Div one
</div>
<div class="childDiv" style="position: absolute; top: 75px;">
div two
</div>
<div class="childDiv" style="position: absolute; top: 140px;">
div three
</div>
</div>

我有一个父div，在此之下我将附加和删除 HTML 元素作为子元素，如果我删除子元素父div 必须自动缩小其高度，如果我添加它必须自动扩展，我的要求是父级和子级都必须具有绝对位置(style="position：absolute"(

Answer 1

$("#add").on("click", function() {
addChild();
calculateParentHeight();
});
$("#remove").on("click", function() {
$(".parent .child:last").remove();
calculateParentHeight();
});
function calculateParentHeight() {
var height = 0;

$('.parent .child').each(function() {
height = height + $(this).height();  
});
$('.parent').css('height', height + 20 + 'px');
}
calculateParentHeight();
function addChild() {
var top = 0;

$('.parent .child').each(function() {
top = top + $(this).height();  
});
$(".parent").append("<div class='child' style='top:" + top + "px;'>divvvvvv</div>");
}

* {
box-sizing: border-box;
}
.parent {
position: absolute;
background: antiquewhite;
width: 300px;
}
.child {
position: absolute;
background: yellow;
width: calc(100% - 20px);
height: 50px;
margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">add</button>
<button id="remove">remove</button>
<div class="parent">
<div class="child" style="position: absolute;">
Div one
</div>
<div class="child" style="position: absolute; top: 50px;">
div two
</div>
<div class="child" style="position: absolute; top: 100px;">
div three
</div>
</div>

Answer 2

在添加和删除子项时更改父级div 的高度

$("#add").on("click",function(){
var top = parseInt($("#parentDiv .childDiv:last").css("top").split("px")[0])+90;
$("#parentDiv").append("<div class='childDiv' style='position:absolute; top:"+top+"px;'>divvvvvv</div>");
$("#parentDiv").css('height', top + 90);
});
$("#remove").on("click",function(){
$("#parentDiv").css('height',$("#parentDiv .childDiv:last-child").css('top'));
$("#parentDiv .childDiv:last").remove();
});

#parentDiv
	    {
	     background: antiquewhite;
	     }
	    .childDiv
	    {
	    background: yellow;
width: 700px; 
height: 50px;
	     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="add">add</button><button id="remove">remove</button>
<div style="position: absolute; width: 700px; height: 210px;" id="parentDiv">
<div class="childDiv" style="position: absolute;">
Div one
</div>
<div class="childDiv" style="position: absolute; top: 75px;">
div two
</div>
<div class="childDiv" style="position: absolute; top: 140px;">
div three
</div>
</div>