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
.