How to Set equal heights for divs with jQuery - TechGeeksPro

How to Set equal heights for divs with jQuery

To make divs have equal height using jQuery, you can use the following code:

$(document).ready(function(){
  // Get the heights of all the divs
  var heights = $(".my-divs").map(function() {
    return $(this).height();
  }).get();

  // Find the maximum height
  var maxHeight = Math.max.apply(null, heights);

  // Set all the divs to the maximum height
  $(".my-divs").height(maxHeight);
});

In the above code, replace .my-divs with the class name of the divs that you want to make equal in height.

Here’s how the code works:

  • On document ready, it gets the heights of all the divs using the map() function.
  • It then finds the maximum height of all the divs using the Math.max() function.
  • Finally, it sets the height of all the divs to the maximum height.

Note that this code assumes that all the divs have the same class name. If you want to target specific divs, you can use a different selector instead of .my-divs.

Leave a Reply

Your email address will not be published. Required fields are marked *