由于 div 内部的绝对位置，节高为 0

Question

所以基本上我有一个section标签，里面有3个div，绝对定位（用于同位素插件）

              <section id="section1" class="cd-section"> // pos. static/relative has height 0px
                    <div class="itemIso"> // pos. absolute, height ~900px
                          div1
                    </div>
                    <div class="itemIso"> // pos. absolute, height ~700px
                          div2
                    </div>
                    <div class="itemIso"> // pos. absolute, height ~600px
                          div3
                    </div>
              </section>

这是一张图片：

现在显然我的问题是，由于 div 的位置是绝对的，而 section1 是静态/相对的，它的高度是 0，我希望它是 900+700+600=whatever,2200px？是吗？ 我有 6 个这样的部分，我无法设置固定高度，因为它可能会发生变化。

任何 jQuery、js、任何可以解决这个问题的东西？

Answer 1

最好的解决方案是在每次改变孩子身高后重新计算截面的高度。使用这种方法，您需要在加载图像、字体或调整屏幕大小后调用calculateHeight() 函数。您还需要确保外部插件不会覆盖元素，例如示例的第 2 和第 3 部分。

function calculateHeight(){
  var maxHeight = 0;

  $(".section > div").each(function() {
    var height = $(this).height();   
    height += $(this).position().top;    
    
    if (height > maxHeight)
        maxHeight = height;
  });

  $('.section').height(maxHeight);
}


$(function() {
  
  calculateHeight();
  
  $(window).resize(calculateHeight);
});

.section{
  position: relative; 
  background: red;
}

.section-i{
  position :absolute;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  
}

.section-i.s1{
  top: 15px;
  height: 100px;
}

.section-i.s2{
  top: 130px;
  height: 200px;
}

.section-i.s3{
  top: 300px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section">
  <div class="section-i s1">
  </div>
  <div class="section-i s2">
  </div>
  <div class="section-i s3">
  </div>
</section>

希望能帮到你

Answer 2

使用 JQuery...

请注意，此示例不考虑子 div 的位置，只考虑它们的高度。

$(function() {
  var sectionHeight = 0;

  $("#section1 > div").each(function() {
    sectionHeight += $(this).height();
  });

  $('#section1').height(sectionHeight);
});

.cd-section {
  position: relative;
  background: lightgrey;
  border: 5px solid red;
}

.cd-section>div {
  position: absolute;
  height: 200px;
  width: 100%;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section1" class="cd-section">
  <div class="itemIso">
  </div>
  <div class="itemIso">
  </div>
  <div class="itemIso">
  </div>
</section>