Это достаточно старый трюк, который широко используется для создания колонок одинаковой высоты.
Заключается он в использовании фонового изображения, которое повторяется по вертикали. Пример такого изображения приведён ниже (в целях наглядности он немного увеличен).
Такое изображение, как правило, имеет 1 px в высоту и ширину, равную ширине шаблона.
HTML
В примере используется следующая разметка:
<div id="container">
<div id="sidebar">
<p>Боковая панель</p>
</div>
<div id="content">
<p>Основное содержание</p>
</div>
</div>
В качестве контейнера можно использовать тег body. В примере используется отдельный элемент div для демонстрации возможности применения метода к части содержания страницы.
CSS
#container {
width:960px;
margin:0 auto;
background: url("faux-columns.png") repeat-y;
overflow: hidden
}
#sidebar {
float:left;
width:340px;
}
#content {
float:left;
width:620px;
}
Код CSS весьма прост. Смещаем плавающие блоки #sidebar и #content влево и устанавливаем соответствующую ширину для них. Устанавливаем отступы для контейнера #container.
В качестве фона для контейнера мы используем изображение faux-column.png (именно такое, как описывалось выше). Также для него устанавливается свойство overflow: hidden. Оно нужно для того, чтобы предотвратить сворачивание контейнера.
Контейнер всегда будет иметь такую же высоту, как и самая большая колонка. Фоновое изображение поэтому будет выглядеть так, как будто колонки имеют одинаковую высоту.
Данный метод лучше всего использовать в фиксированных шаблонах, но он может с успехом применяться и на большинстве плавающих шаблонов.
Вы также можете использовать весь спектр визуальных средств для фона (тени, рамки и так далее). Также можно задействовать изображения более чем 1 px в высоту.
Плюсы:
1 Просто реализовать..
2 Работает вне зависимости от высоты колонки.
Минусы:
1 Требуется изображение, которое использует дополнительный запрос HTTP.
2 Изменения в шаблоне требуют изменений в изображениях.