Сегодня речь пойдет о решении такой проблемы как создание колонок одинаковой высоты. Для тех кто не в курсе данной проблемы ее описание внутри…
Допустим у нас есть простой html файл примерно следующего содержания:
<html> <head> </head> <body> <div style="width:150px;"> <div class="column" style="float:left;width:50px;background:#ff0000;"> 1 </div> <div class="column" style="float:left;width:50px;background:#00ff00;"> 2 </div> <div class="column" style="float:left;width:50px;background:#0000ff;"> 3 </div> </div> </body> </html>
Примечание: Класс у колонок указан не просто так, для чего это нужно будет понятно далее!
На первый взгляд все будет выглядеть хорошо. Но стоит добавить в какой-нибудь блок побольше текста, как мы увидим картину, когда наши блоки превращаются в красочную диаграмму. Собственно в этом и есть проблема. На данный момент нет однозначного решения, позволяющего растянуть все три блока по высоте максимального.
Решение данной проблемы может быть в лоб с использованием вместо элемента div старый добрый table. Еще одно решение может заключаться с использовании css и свойства display. Однако мы рассмотрим вариант решения с помощью скриптов на примере jquery и без него.
Первое что нам необходимо это назначить нашим колонкам какой-нибудь уникальный класс (это в примере уже сделано) для того чтобы можно было получить список всех колонок, с которыми нужно работать.
Ну а далее в работу вступает скрипт:
JQuery
$(document).ready(function() {
setTimeout(function() {
var mainDivs = $(".column"); //Получаем все элементы с классом column
var maxHeight = 0;
for (var i = 0; i < mainDivs.length; ++i) {
if (maxHeight < $(mainDivs[i]).height()) { //Находим максимальную высоту
maxHeight = $(mainDivs[i]).height();
}
}
for (var i = 0; i < mainDivs.length; ++i) {
$(mainDivs[i]).height(maxHeight); //Устанавливаем всем элементам максимальную высоту
}
}, 1000);
});
Здесь стоит отметить момент, что скрипт вызывается не только после загрузки страницы, но еще и с небольшой задержкой. Связано это с тем, что браузер не всегда может успеть отобразить загруженные картинки, и как следствие высота некоторых блоков будет считаться неверно. Задержка же гарантирует, что картинки успеют показаться полностью.
Если вы не используете Jquery, то данный код можно записать на чистом Javascript:
window.onload = function() {
setTimeout(function() {
var mainDivs = document.getElementsByClassName("column");
var maxHeight = 0;
for (var i = 0; i < mainDivs.length; ++i) {
if (maxHeight < mainDivs[i].clientHeight) {
maxHeight = mainDivs[i].clientHeight;
}
}
for (var i = 0; i < mainDivs.length; ++i) {
mainDivs[i].style.height = maxHeight + "px";
}
}, 1000);
}
Если же Вы привыкли использовать Jquery плагины, то для Вас код далее.
$.fn.setEqualHeight = function() {
$this = this;
setTimeout(function() {
var maxHeight = 0;
$this.each(function() {
if (maxHeight < $(this).height()) {
maxHeight = $(this).height();
}
});
$this.each(function() {
$(this).height(maxHeight);
});
}, 1000);
}
$(document).ready(function() {
$(".column").setEqualHeight();
});
