Колонки одинаковой высоты на JQuery
Задача: Есть, допустим, несколько блоков div, которым надо сделать одинаковую высоту, независимо от содержимого.
Решение: В интернете много всяких решений. Но мне понравилось одно на JQuery. Делается просто и со вкусом. Итак, кодим. Для начала создаем структуру:
<div>
<div class="first column">1<br/></div>
<div class="second column">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/></div>
</div>
Класс column обязателен, добавим немного стилей:
.column {
width : 20%;
float : left
}
.first {
background : red
}
.second{
background : blue
}
Подключаем JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
И сам скриптик:
<script>
function equalHeight(group) {
var tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function(){
equalHeight($(".column"));
});
</script>
Что тут и как работает?
А просто вызывается функция equalHeight, которая сравнивает высоту блоков, и задает всем блокам, имеющим класс column, одинаковую высоту через инлайн-стили. Все просто.
Обновление
За окном шел 2019 год, и решение немного устарело. Для более современного решения используем скрипт matchHeight.
Колонки одинаковой высоты на CSS Flex
Если вы верстаете сайты только под современные браузеры, то вам еще лучше. Вы можете отказаться от использования Javascript в сторону использования CSS Flexbox или CSS Grid.
<div class="list">
<div class="list__item"></div>
<div class="list__item"></div>cod
<div class="list__item"></div>
<div class="list__item"></div>
</div>
.list {
display : flex;
flex-wrap : wrap;
}
.list__item {
display : flex;
width : 25%;
flex-wrap : wrap;
flex-direction : column;
}
See the Pen Equal Height Columns in CSS Flex by Pavel Saik (@PavelSaik) on CodePen.
Подскажите пожалуйста кто сталкивался с такой проблемой:
скрипт EqualHeights работает на всех экранах при любых условиях — но есть одно НО
При загрузке страницы с длинным контентом, часть контента выходит (вылезает, не помещается) за границы одного из блоков.
Причем есть странность — если бы код совсем не сработал — блоки были бы просто разной высоты.
А получается, что блоки одинаковой высоты, и не вмещаются всего пара предложений.
Но после обновления страницы f5 «глюк» уходит.
Этот «глюк» появляется периодически, но не систематически. Либо систематику я вывить не смог