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

10 lutego 2016
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

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());
});

Autor: Matt Smith

Źródło: https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know

Tłumaczenie: Łukasz Piwko

Treść tej strony dostępna jest na zasadach licencji MIT

Zobacz również:

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *