Nadanie dwóm elementom div takiej samej wysokości za pomocą jQuery

10 lutego 2016

Czasami chcemy, aby dwa elementy div miały taką samą wysokość niezależnie od tego, ile treści zawierają:

$('.div').css('min-height', $('.main-div').height());

Ten skrypt ustawia własność CSS min-height, dzięki czemu nasz element może być wyższy od głównego elementu div, ale nie może być od niego mniejszy. Jeśli jednak potrzebujesz bardziej elastycznego rozwiązania, możesz napisać pętlę sprawdzającą wysokości zbioru elementów div i ustawiającą im taką wysokość, jaką ma najwyższy z nich:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

Jeśli wszystkie kolumny mają mieć taką samą wysokość:

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});