Колонки одинаковой высоты.

Posted on Октябрь 19, 2007
Filed Under columns, expression, equal height, ie7, ie6, css |

Итак, задача сделать разметку в 3 колонки, при этом, чтобы колонки были равной высоты, вне зависимости от объема контента в каждой из них.

Основа трёх колонок

Исходный HTML:

<div class="equal">
<div id="row" class="row">
<div class="one">
<h2>Контейнер</h2>
<p>...обычный параграф...</p>
</div>
<div class="two">
<h2>Другой контейнер</h2>
<p>...обычный параграф...</p>
<p>...другой обычный параграф...</p>
</div>
<div class="three">
<p>...отцентрированный по вертикали параграф...</p>
</div>
</div>
</div>

С помощью CSS сделаем так, чтобы этот набор блоков отображался как таблица:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}

посмотреть.

Естественно это не работает в Internet Explorer.

Необходимо также заметить, что даже браузеры, поддерживающие CSS table, имеют
некоторые различия и ошибки в обработке CSS table.

Немного украсим нашу таблицу:

.equal {
margin:0 auto;
border-spacing:10px;
width:600px;
text-align: left;
}
.row div {
background-color:#f7f8f9;
border: solid 1px #bbb ;
padding-bottom: 30px ;
width:185px;
}
.row div h2 {
margin:0 0 0.5em 0;
padding:0.5em 10px;
font-size:120%;
color:#333;
}
.row div p {
font-size: 100%;
margin:0.5em 0;
padding: 0 10px;
}

посмотреть.

Основа 3 колонок для IE

Создадим отдельные стили для IE, так как эти браузеры не умею работать с табличной моделью CSS:

.equal {
padding: 10px;
width: 580px;
}
.row {
margin-top: 10px;
height: 1%;
}
.row div {
float:left;
position: relative;
overflow-x:hidden;
}
.row .two {
margin-left:10px;
}
.row .three {
margin-left: 10px;
margin-right: -9px;
}

посмотреть.

Для добавления этих стилей используем условные комментарии.

Костыли для одинаковой высоты в IE6

Для того, чтобы сделать все блоки одинаковой высоты используем expression.

Следующее выражение считывает высоту родительского блока, в банном случае .row (это и будет высота самой высокой колонки).

* html .row div {height: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? parseFloat(this.parentNode.offsetHeight)-33) :(parseFloat(this.parentNode.offsetHeight)-1));}

посмотреть.

Если посмотреть внимательно, то можно заметить, что высота не совсем одинаковая. Разница составляет 1px. Это сделано для того, чтобы при изменении размера шрифта в меньшую сторону, высота пересчитывалась относительно самой высокой колонки.

Если изначально знать какая колонка будет являться самой высокой, то можно высчитывать высоту оставшихся исходя из нее, но так как мы делаем универсальный метод то приходиться прибежать к такому “просчету”.

В приведенном выше выражении “-1” это тот пиксел, который нам позволит оставить одну самую высокую колонку, а “-33” рассчитывается по формуле: padding-bottom: 30px + border-top-width: 1px + border-bottom-width: 1px + 1px “разница для самой высокой” = -33

При неправильной формуле есть шанс “повесить” наш любимый браузер.

Костыли для одинаковой высоты в IE7

К сожалению IE7 также не поддерживает CSS в той мере, в которой нам необходимо, но при этом исправлено много багов, которые были в IE6. Для IE7 используем min-height и тотже 1px для соблюдения условия “самая высокая колонка”.

html>body .row div {min-height: expression( parseFloat(this.parentNode.offsetHeight)-33);}

посмотреть.

Здесь можно было и не использовать хак, так как более старые версии браузера не поддерживают свойство min-height.

Симуляция таблицы

С помощью данной таблицы стилей можно без проблем отображать блоки, как при “табличной верстке”.

посмотреть.

Почему используем CSS таблицы

Может возникнуть вопрос : “Если мы можем использовать CSS table, почему мы не можем использовать HTML table вместо этого? HTML table работают во всех браузерах.“

Да, они работаю.

Однако, таблицы в CSS это не таблицы – они разработаны, только чтобы быть
похожими на таблицы. Таблицы в CSS могут использоваться всякий раз, где и когда мы хотим визуально имитировать таблицу, в отличие от таблиц в HTML, которые должны использоваться только для табличные данных.

Вольный перевод оригинала.

Comments

• Облако категорий

  table of contents table safari rounded corners quirks mode png24 php & mysql opera multiple backgrounds menu media types javascript image replacement ie7 ie6 ie5.5 ie5 ie html generated content form flash expression equal height doctype definition lists css3 css columns caption bug browsers border-radius :before шпаргалки сonditional сomments книги жизнь Интересно

• Последние записи

  • Скругленные углы используя CSS3 (multiple backgrounds и border-radius).
  • Верстаем оглавление из книги.
  • CSS media types или различные стили для различных медиа носителей
  • Колонки одинаковой высоты.
  • Что происходит в браузерах при Quirks Mode
  • Как создать стили только для IE
  • Генерирование заголовков для таблицы

• Читаю

  • Design For Masters
  • DesignLife.ru
  • Re.Актив
  • RMCreative
  • Sribna
  • Vurtseed
  • webDev
  • Свобода слова вебмастерского

• из RSS читалки

• Поиск

• Счетчики

  • 
  • 
  • 
  • 

• На правах рекламы: