hippolas_cage hippolas_cage - 3 years ago 206
jQuery Question

Add some extra height to a div which has the equal height of a other div

I have the script down below that equals the height of two divs containing a spefific class. But in my case I need to add some extra height to an div.

I think this graphic explains it pretty good:

enter image description here

My script

$(document).ready(function(){
//set the starting bigestHeight variable
var biggestHeight = 0;
//check each of them
$('.equal_height').each(function(){
//if the height of the current element is
//bigger then the current biggestHeight value
if($(this).height() > biggestHeight){
//update the biggestHeight with the
//height of the current elements
biggestHeight = $(this).height();
}
});
//when checking for biggestHeight is done set that
//height to all the elements
$('.equal_height').height(biggestHeight);
});

Answer Source

Here is an example, how to add extra height to the second div with class equal_height:

$(document).ready(function() {   
    var biggestHeight = 0;  
    $('.equal_height').each(function(){  
        if($(this).height() > biggestHeight){  
            biggestHeight = $(this).height();  
        }  
    });  
    $('.equal_height').each(function(i, item) {
      if (i === 1) {
        $(item).height(biggestHeight + 50);
      } 
    });
});
.equal_height {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: violet;
  margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="equal_height"></div>
<div class="equal_height"></div>
<div class="equal_height"></div>

And this script will make all your divs with class equal_height the same height (the largest height):

$(document).ready(function() {   
    var biggestHeight = 0;  
    $('.equal_height').each(function(){  
        if($(this).height() > biggestHeight){  
            biggestHeight = $(this).height();  
        }  
    });  
    $('.equal_height').each(function(i, item) {
        $(item).height(biggestHeight);
    });
});
.equal_height {
  display: inline-block;
  width: 50px;
  background-color: violet;
  margin-left: 10px;
}

#one {
  height: 50px;
}

#two {
  height: 25px;
}

#three {
  height: 75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="equal_height" id="one"></div>
<div class="equal_height" id="two"></div>
<div class="equal_height" id="three"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download