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()); });
Autor: Matt Smith
Źródło: https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know
Tłumaczenie: Łukasz Piwko
Treść tej strony jest dostępna na zasadach licencji MIT
Zobacz również:
- Przycisk powrotu do góry w jQuery
- Wczytywanie obrazów na zapas za pomocą jQuery
- Sprawdzanie za pomocą jQuery czy obrazy zostały już załadowane
- Automatyczne poprawianie uszkodzonych obrazów za pomocą jQuery
- Zmienianie klas za pomocą jQuery w reakcji na najechanie kursorem na element
- Wyłączanie pól formularza za pomocą jQuery
- Wyłączanie odnośników za pomocą jQuery
- Przełączanie efektów zanikania i przesuwania za pomocą jQuery
- Prosty akordeon w jQuery