Project Awesome project awesome

Make Two Divs the Same Height > Make Two Divs the Same Height

Sometimes you'll want two divs to have the same height no matter what content they have in them: ``javascript $(".div").css("min-height", $(".main-div").height()); ` This example sets the min-height which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set height to the height of the tallest element: `javascript var $columns = $(".column"); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height); ` If you want all columns to have the same height: `javascript var $rows = $(".same-height-columns"); $rows.each(function () { $(this).find(".column").height($(this).height()); }); `` > [!NOTE] > This can be done several ways in CSS but depending on what your needs are, knowing how to do this in jQuery is handy.

Package GitHub
Back to Tips