html - 如何包含位置绝对div？

Question

我有这个 fiddle here这是下图

我需要实现的是让黑色容器根据里面的元素动态扩展(元素是A，B，C)输出必须是

没有静态设置高度

我的html是

<div class="container">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemC">C</div>
<div>    

我的CSS是

.container{
    position:relative;
    width:200px;
    min-height:300px;
    background-color:black
}
.itemA{
    position:absolute;
    top:260px;
    background-color:red;
    width:30px;
    height:30px;
}
.itemB{
    position:absolute;
    top:50px;
    right:90px;
    background-color:green;
    width:30px;
    height:30px;
}
.itemC{
    position:absolute;
    top:220px;
    right:50px;
    background-color:blue;
    width:30px;
    height:30px;
}

Answer 1

您可以使用此脚本。首先计算最大高度然后设置容器的高度

$(function(){
  var y = 0;
  $('.container .item').each(function(){
    y = Math.max(y, $(this).height() + $(this).position().top);
  });

  $('.container').css('height', y);
});

.container{
    position:relative;
    width:200px;
    min-height:200px;
    background-color:black
}
.itemA{
    position:absolute;
    top:260px;
    background-color:red;
    width:30px;
    height:30px;
}
.itemB{
    position:absolute;
    top:50px;
    right:90px;
    background-color:green;
    width:30px;
    height:30px;
}
.itemC{
    position:absolute;
    top:220px;
    right:50px;
    background-color:blue;
    width:30px;
    height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="itemA item">A</div>
    <div class="itemB item">B</div>
    <div class="itemC item">C</div>
<div>