ProfiPHPProfiPHP
Категория: Полезное в CSS

Одинаковая высота колонок DIV

Наиболее часто встречаемый в интернете шаблон сайта содержит 2 колонки. Разберем, как выровнять методами CSS колонки одинаковой высоты.

Для начала колонки необходимо включить к общему блоку DIV и добавить свойство display: table, которое позволяет задать элементу тип таблица:
.wrap{ display: table; width: 100%; height: 100% }
Далее необходимо у всех колонках добавить свойство display: table-cell, которое назначает элементу тип ячейки таблицы. К таблицам, созданным с помощью CSS, можно применять те же свойства, что и к обычным таблицам. Например, выравнивание верхнего края элемента по верху самого высокого элемента строки.
.left, .right{ display: table-cell; vertical-align: top }
Код HTML будет выглядеть приблизительно следующим образом:
<div class="wrap">
<div class="left">
Содержимое левого блока
</div>
<div class="right">
Содержимое правого блока
</div>
</div>
Использовав данное решение у вас все колонки будут одинаковой высоты.

Добавить комментарий

Имя:
Текст комментария: