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是静态/相对的，它的高度是0，我希望它是900 + 700 + 600 =无论如何，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

最佳解决方案是在孩子每次更换后重新计算部分的高度。高度。使用这种方法，您需要在加载图像，字体o调整大小屏幕后调用calculateHeight（）函数。此外，您需要确保外部插件不会覆盖元素，例如示例的第2和第3部分。

＆＃13;

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);
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

希望我帮助你

由于div内部的绝对位置，截面高度为0

2 个答案: