The reason the section's height is set to 0 is due to the absolute positioning of the div

Question

The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the 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>

Check out this image: https://i.stack.imgur.com/UIqQr.png

The issue I'm facing is that since the divs have position absolute and the section1 is static/relative, its height is 0. I want it to be the sum of the heights of the divs, which in this case would be 900+700+600=2200px. However, as I have six of these sections, setting a fixed height is not ideal since it might change.

Is there any jQuery, JavaScript, or other solution to solve this problem?

html css position height absolute

Answer 1

Answer №1

By utilizing JQuery...

It is important to note that this particular example does not take into consideration the placement of the child divs, only their respective heights.

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

By utilizing JQuery...

It is important to note that this particular example does not take into consideration the placement of the child divs, only their respective heights.

$(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 3

Answer №2

To ensure the optimal solution, it is recommended to recalculate the section's height after any changes in the children's height. This can be achieved by invoking the calculateHeight() function following actions such as loading images, adjusting fonts, or resizing the screen. Additionally, it is important to prevent external plugins from overlapping elements, similar to the second and third sections in the provided 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>

Your issue should now be resolved!

Answer 4

To ensure the optimal solution, it is recommended to recalculate the section's height after any changes in the children's height. This can be achieved by invoking the calculateHeight() function following actions such as loading images, adjusting fonts, or resizing the screen. Additionally, it is important to prevent external plugins from overlapping elements, similar to the second and third sections in the provided 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>

Your issue should now be resolved!

The reason the section's height is set to 0 is due to the absolute positioning of the div

Answer №1

Answer №2

Similar questions

Conceal anchor links using jQuery by targeting their title attribute

Designing php/mysql data in a container

Having difficulty in displaying database values in HTML modal using PHP

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Scrolling with animation

How can I keep the CSS3 animation playing even after the hover state ends?

Assign a class to the checkbox of the first parent

Manipulating the content of a specific row's table cells with a text box in jQuery Datatables

What causes the variation in the appearance of the navigation bar across different pages?

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Checking if children have certain text using jQuery

Tips on how to loop a song continuously in jPlayer's circular mode

Is there a way to dynamically update a game's highscore from a database without having to refresh the page?

What is preventing images from displaying in my slider within baguetteBox?

What is the best way to ensure grid element takes up 100% of the available height within a flex column

Gliding over the problem with the Azure line

Utilizing global variables in Vue.js while working with the CLI template

Accordion section appears on the webpage as it is loaded

Saving information to a hidden div using jStorage

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?