由于div在里面的绝对位置，所以section height为0

Question

所以基本上我有一个部分标签，里面有 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 是 static/relative，它的高度是 0，我希望它是 900+700+600=whatever，2200px？是吗？我有 6 个这样的部分，我无法设置固定高度，因为它可能会发生变化。

有什么jQuery，js，能解决这个问题的东西吗？

Answer 1

使用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>

Answer 2

最佳解决方案是在每次更改 children' 高度后重新计算该部分的高度。使用这种方法，您需要在加载图像、字体或调整屏幕大小后调用 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>

希望能帮到你

由于div在里面的绝对位置，所以section height为0

Section height is 0 because of div's absolute position inside

html

css

height

position

absolute