Setting equal heights for div using jQuery html

Setting equal heights for div using jQuery html

In this post we will show you Setting equal heights for div using jQuery html, hear for Setting equal heights for div using jQuery html we will give you demo and example for implement.

Hear we want to set equal height for divs using jQuery. All the div may have different amount of content and different default height. Here is a sample of html layout.

Loop through each container

• Get the heights of each column within that container
• Find the highest one
• Apply that height to every column in that container before moving on to the next one.

Html of Setting equal heights for div using jQuery html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="containers">
    <div class="columns">This is<br />the highest<br />column</div>
    <div class="columns">One line</div>
    <div class="columns">Two<br />lines</div>
</div>
<div class="containers">
    <div class="columns">One line</div>
    <div class="columns">Two<br>lines</div>
    <div class="columns">One line</div>
</div>

jQuery of Setting equal heights for div using jQuery html

$(document).ready(function(){
    // Select and loop the containers element of the elements you want to equalise
    $('.containers').each(function(){  
      // Cache the highest
      var min_highestBox = 0;
      // Select and loop the elements you want to equalise
      $('.columns', this).each(function(){
        // If this box is higher than the cached highest then store it
        if($(this).height() > min_highestBox) {
          min_highestBox = $(this).height(); 
        }
      });  
            
      // Set the height of all those children to whichever was highest 
      $('.columns',this).height(min_highestBox);
    }); 

});

Output

Hope this code and post will helped you for implement Setting equal heights for div using jQuery html. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org