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

Question

So basically I've got a section tag, with 3 divs inside, positioned absolute (used for isotope plugin)

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

Here's a pic:

Now obviously my problem is that since divs have position absolute and section1 is static/relative, it's height is 0, and I want it to be 900+700+600=whatever,2200px? is it? I've got 6 of these sections, I can't set a fixed height, since it might be changing.

Any jQuery,js,whatever stuff that can solve this?

Answer 1

The best solution is recalculate the section's height after each change of the children' height. With this approach you need to call calculateHeight() function after load images, fonts or resize screen. Also you need to be sure that external plugin don't overlay the elements, like the 2nd and 3rd section of the example.

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>

Hope I help you