По роду занятий, сталкиваясь с потребностями начинающих вебмастеров сверстать каркас страницы интернет магазина строго по прихотям заказчика, приходится время от времени подсказывать какие-то мелочи и помогать в нахождении лёгких решений нетипичных задач.
Одна из таких — используя только обожаемую заказчиком DIV-ную вёрстку и вообще не привлекая JavaScript, дать колонкам сайта автоматическое выравнивание высоты по наиболее заполненной колонке, подобно тому как это происходило бы в нелюбимой табличной вёрстке.
Ниже предлагаю элементарное решение на основе всего двух объявлений в стилях сайта и одного обёрточного контейнера в теле страницы. Решение валидно для множества браузеров, кроме IE6 — IE7, и при удалении одного свойства из стилей, привнесённых этим решением, может быть преобразовано под браузеры без поддержки CSS3.
Объяснение решения: (ссылки на живое демо смотрите в конце публикации)
Предположим, есть следующая разметка: шапка, три колонки (левая, центральная, правая) и подвал страницы.
<!DOCTYPE HTML>
<html>
<head>
<title> Пример колонок одинаковой высоты на CSS </title>
</head>
<body>
<div id="header"> шапка </div>
<div id="left"> левая колонка </div>
<div id="center"> центральная колонка </div>
<div id="right"> правая колонка </div>
<div id="footer"> подвал </div>
</body>
</html>
Первым делом оборачиваем будущие колонки в DIV-контейнер. Например, назначим ему идентификатор columns.
<!DOCTYPE HTML>
<html>
<head>
<title> Пример колонок одинаковой высоты на CSS </title>
</head>
<body>
<div id="header"> шапка </div>
<div id="columns">
<div id="left"> левая колонка </div>
<div id="center"> центральная колонка </div>
<div id="right"> правая колонка </div>
</div>
<div id="footer"> подвал </div>
</body>
</html>
Осталось прописать в стили сайта следующее:
#columns {
display: table;
width: 100%;
box-sizing: border-box; /* не поддерживается в CSS2 */
-moz-box-sizing: border-box; /* фикс проблемы для Firefox */
margin-left: 0;
margin-right: 0;
}
#columns > div,
#columns > noindex > div {
display: table-cell;
vertical-align: top;
width: auto;
box-sizing: border-box; /* не поддерживается в CSS2 */
-moz-box-sizing: border-box; /* фикс проблемы для Firefox */
}
Здесь мы указали браузеру, что требуем обёрточный контейнер показывать как блочную таблицу на всю ширину родителя, причём для исключения непредвиденных искажений размеры таблицы просим рассматривать по её границам (плюс неучитываемые margin-отступы с боков погашаем намеренно, иначе размер исказится). А вложенные в эту обёртку первородные DIV-ы призываем показывать как ячейки таблицы с подстраиваемой шириной (подстройку высоты браузер делает сам) и таким же рассмотрением размеров ячеек по их границам, а не по границам содержащегося в них контента.
Заметка: в CSS2 не поддерживается свойство box-sizing, поэтому для старых браузеров, в случае необходимости указать размеры ячеек, делать это нужно за вычетом значений border — и padding-отступов.
Теперь если бы мы, например, захотели боковые колонки сделать фиксированного размера, то в стилях просто нужно прописать желаемые ограничительные размеры колонок. Допустим, желаем левую колонку — 300 пикселей, а правую — 200 пикселей и вдобавок с отсечением невольно выступивших за край частей её содержимого.
#columns > #left,
#columns > noindex > #left {
max-width: 300px;
min-width: 300px;
width: 300px;
}
#columns > #right,
#columns > noindex > #right {
max-width: 200px;
min-width: 200px;
width: 200px;
overflow: hidden;
}
Заметка: такое указание родства объектов, как использовано в продемонстрированном примере, необходимо для гарантии срабатывания стилевых правил лишь на конкретные колонки, принадлежащие непосредственно обёртке. А добавочное причисление случая с тегом noindex служит цели отработать ситуацию, когда СЕОшник сайта решил отдельную колонку закрыть от индексирования поисковыми серверами (нынче в строении интернет магазинов это бывает принципиальной деталью).
Явные достоинства:
- простая реализация;
- гарантированная одинаковая высота колонок;
- колонки легко переставляются местами при необходимости;
- легко добавить дополнительные колонки или изъять лишние;
- колонки запросто скрываются от индексирования оборачиванием в тег noindex;
- это не float-решение, поэтому отсутствует дефект «соскакивание колонки на новую строку».
Важная СЕО-деталь такого решения состоит в том, что стилизация DIV-колонок под ячейки таблицы не наносит урон поисковому продвижению страницы. Ведь согласно спецификации, стилевые правила описывают, как элементы разметки будут выглядеть на экране браузера, и ни в коем случае не переопределяют тип содержимого элемента. То есть в примере выше стиль лишь предписывал браузеру показывать DIV-колонки ПОДОБНО ячейкам таблицы. Не считать их ячейками, а именно показывать как ячейки. Как же браузер и поисковый робот должны интерпретировать элемент, это задано тегом элемента. В данном примере разметкой было указано, что колонку требуют интерпретировать как DIV (division, раздел), но никак не TD (table division, раздел таблицы) лишь на основании, что элемент станет внешне похожим на ячейку.
Недостатки:
- не работает в браузерах IE6, IE7 — они изначально не поддерживают свойство display: table в стилях;
- в браузере Safari 3.1 требуется удвоенная обёртка DIV-ами — здесь свойство display: table-cell дочернего объекта первого родства работает при наличии пары родительских контейнеров, вложенных один в другой со свойствами display: table и display: table-row;
- нельзя использовать боковые margin-отступы у обёрточного DIV-а, если одновременно задаём ему ширину не в форме width: auto, потому что при рассмотрении размеров объекта браузер не принимает во внимание размеры margin-отступов, следовательно правый край объекта «уедет» дальше положенного на величину неучтённого отступа;
- у колонок не получится задать margin-отступы, потому что браузер игнорирует всяческую манипуляцию такими отступами в объектах со свойством display: table-cell;
- строго неподвижная фиксация ширины колонок вне зависимости от ширины их содержимого (то есть когда край колонки не сместится, даже если неразрывные части контента вылезут за край) сохраняется только при указании трех ограничительных размеров (свойства width, min-width, max-width) в абсолютных единицах, в то время как использование относительного размера, скажем 20%, не гарантирует удержание ширины на неразрывной части контента, так как неявно позволяет браузеру автоподстройку ширины колонки в заём избыточного пространства соседних колонок с относительным или width: auto размером.
Ссылки на живое демо:
imperacms.ru/css-div-cells-example.html — эта демонстрационная страница сделана на основе фрагментов изложенного выше кода. Только всё (html-код и css-правила) объединено в один HTML-файл. В дополнение колонки раскрашены разными цветами и в них добавлен много строчный контент, чтобы сразу был понятен эффект.
demo.imperacms.ru/?theme=example — это пример технического шаблона example, в котором использована изложенная выше техника CSS-колонок.
Автор: ImperaCMS
