Создание колонок равной высоты, используя элементы div, связано с некоторыми проблемами. Обычно такой эффект реализуется с помощью фоновых изображений. Однако, данный метод лишь создаёт иллюзию равной высоты у колонок и имеет определённые минусы. В качестве альтернативы этому методу можно использовать javascript и популярный фреймворк jQuery.
Допустим, необходимо сделать три колонки одинаковой высоты.
<div class="column news"> … </div> <div class="column articles"> … </div> <div class="column contacts"> … </div>
Предварительно сделаем их «плавающими», а ширину каждой колонки сделаем равной 1/3 ширины окна.
.column{ float:left; width:33% } .news{ background:#4B2185 } .articles{ background:#DC85DE } .contacts{ background:#C43959; width:34% }
Добавим файл библиотеки и небольшой код:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } $(document).ready(function() { equalHeight($(".column")); }); </script>
Параметром функции equalHeight является класс элементов, которым необходимо сделать одинаковую высоту.
Конечно это не панацея и данный метод также имеет свои минусы, но как ещё один вариант решения проблемы, вполне имеет право на жизнь.
Оригинал: Equal Height Columns with jQuery
Loading ...
при уменьшении высоты браузера текст среднего блока выходит за рамки блока (в FireFox 2)
Да, к сожалению это минус данного примера. Если после загрузки начать изменять ширину окна или увеличивать текст, перерасчёта высоты не происходит.
А вы за «Спартак» болеете или текст попался под руку случайно?
Просто люблю футбол. Видимо новость была про спартак.
Не вижу смысла в такой конструкции. Все это гораздо легче реализуется всего лишь одной таблицей, причем без глюков (и без скриптов).
Единственный минус таблиц — отображение на экранах мобильных устройств, когда желательно такого рода колонки показать одну под другой. Но и это легко лечится: достаточно в соответствующем css прописать что-нибудь вроде td{display:inline}.
Зачем использовать технологию там, где без нее легко обойтись? Только потому, что модно?
Оформил, как плагин, и кое что переделал:
(function($) {
$.fn.equalHeight = function() {
var group = this;
$(window).bind('resize', function(){
var tallest = 0;
$(group).height('auto').each(function() {
tallest = Math.max(tallest, $(this).height());
}).height(tallest);
}).trigger('resize');
}
})(jQuery)
$(document).ready (
function()
{
$(".column").equalHeight();
}
);
* забыл на комменты подписаться, сорри…
Использовать jQuery только для регулирования высоты колонок… Ну не знаю
все это конечно хорошо, но зачем столько проблем, когда можно использовать для одинаковых колонок таблицу?
И кода меньше, и грузится быстрее и выглядит везде одинаково. Не понимаю фанатов исключительно блочной верстки. Блоки нужно использовать там, где они действительно нужны и применение их целесообразно!
Походу случайно , у меня за рамки выходит как поправить
ASSE, согласен с вами, в приведенном примере можно было бы конечно и таблицами обойтись. Но представьте что вам надо расположить несколько объектов одинаковой высоты, следующих друг за другом, количество которых на одной линии не известно. Как вы такое с помощью таблиц сделаете?
Опять же, не вижу проблем внести в <tr> нужное количество <td> — хоть на стороне сервера, хоть на стороне клиента. Равно как не вижу острой необходимости делать блоки одинаковой высоты в разных строках, если в одну они не помещаются, — за очень, может быть, экзотическими исключениями.
Так что пример, конечно, представляет некоторый теоретический интерес, но скорее из области «Посмотрите, как я умею», а не с точки зрения практического использования.
Быть может кому-то как раз в эти экзотические случаи это поможет.
Что ж, Алекс, ваша правда.
В любом случае, с удовольствием читаю ваши заметки и искренне желаю успехов.
Спасибо, приятно слышать.
Did you forget to mention the link to the original author? – http://www.cssnewbie.com/equal-height-columns-with-jquery/
Done!
У меня тоже за рамки выходит последняя колонка.
Не пойму, что все заладили со своими таблицами?
Многие люди верстают без таблиц принципиально, и им такой метод очень даже подходит. Таблицы для табличных данных созданы. Никто же не забыл, я надеюсь?
Автор, спс, за перевод статьи.
Интересно, подключается целая библиотека для того, чтобы воспользоваться одним-единственным селектором? Есть же библиотека поскромнее, чисто для css селекторов, называется sizzle. И именно на основе sizzle построены селекторы jQuery. А вообще getElementsBy… в таких случаях и быстрее и уместнее.
А если на body прописать перерасчет высоты при onresize, браузер будет сильно тормозить?
Господа, которые все пишут о табличной верстке – Вы правда все еще делаете табличные Layout-ы ?
Большой Вам удачи, господа
Как познакомитесь с реальными advanced проектами – пишите.