CSS Равные высоты столбцов - тьфу! Снова?

Question

Правильно, худший вопрос в истории веб-дизайна.Кому интересно, просто выберите вариант.Так что мой вопрос такой:

Каков наилучший ответ, чтобы быть совместимым со стандартами и (назад) совместимым с браузером?

jQuery используется для макета, который должен быть зарезервирован для CSS и HTML
ИЛИ
Отрицательное поле , дополнительные контейнеры или другие взломы или раздувание?

Уже потратил слишком много времени на это, но искал "профессиональный" способ сделать это.

РЕДАКТИРОВАТЬ: Вот пример кода с использованием метода Александра.

Answer 1

Обычно я использую чистый css / html-решение, которое работает в 99% случаев:

У меня есть родительский div с background-repeat на оси Y.Общая структура будет выглядеть следующим образом:

html:

<div id="container" class="clearfix">

    <div class="LeftPane"></div>
    <div class="CenterPane"></div>
    <div class="RightPane"></div>

</div>

css:

#container{
    background:url(imagePath) 0% repeat y;
}

для фонового изображения вы можете применить изображение для границ или все остальное, что может заставить пользователей думатьчто все 3 блока имеют одинаковую высоту

Answer 2

Есть много способов успешно сделать это, я думаю, что самый простой из них - просто обернуть их всех в общий родительский контейнер, установить его display в table или table-row Нет необходимости для родителей вообще. и установите для оригинала <div> s значение display: table-cell;

jsFiddle .

Answer 3

Я предложил революционно новый метод для столбцов одинаковой высоты. Это чистое решение CSS / HTML, протестированное в последних версиях Chrome, Firefox и IE7-9. Это немного сложно настроить, но как только это сделано, это работает прекрасно. Проблема с каждым предыдущим решением, которое я видел, состоит в том, что оно фактически не создает отдельных, параллельных элементов div, которые могут иметь свои собственные границы, поля и т. Д. В других решениях некоторые столбцы перекрываются, что означает, что вы можете противопоставить только различные столбцы путем изменения фона. Этот метод позволяет любому столбцу иметь любую высоту в отличие от некоторых методов. Секрет его успеха заключается в использовании float: right вместо left. Если бы он был перемещен влево, у вас были бы проблемы с дополнительным пространством справа, вызывая полосы прокрутки. Возможно, единственным недостатком этого метода является то, что может быть трудно обернуть голову!

Проверьте это здесь. http://jsfiddle.net/wRCm6/2/

Answer 4

Для совместимости я бы предложил jQuery.Как вы уже сказали, хаки и дополнительные контейнеры делают ваш код раздутым, и в результате вам будет труднее редактировать, если потребуется внести изменения.И в любом случае, HTML - это макет страницы.

Answer 5

Я склонен придерживаться искусственных столбцов .