Начинающие дизайнеры часто задают вопрос: «Как сделать так, чтобы фон колонки растягивался на всю высоту страницы». На самом деле это очень просто, и возможно вы уже знакомы с некоторыми способами, но для тех, кто еще не знает ответа на этот вопрос, я хочу предложить свою технику.

Вертикальное растягивание

Задача усложняется тем, что в CSS блок растягивается ровно на столько, сколько требуется, чтобы вместить все содержимое (если высота не задана явно), например, если блок содержит изображение высотой 200px, то его высота будет равна тем же 200px.

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

В CSS колонки растягиваются в зависимости от количества контента

Есть несколько способов сделать колонки одинаковой высоты, независимо от количества контента содержащегося в них. Я хочу рассказать о своем решении проблемы, которое отличается простотой реализации, и используется на многих сайтах, в том числе и на A List Apart.

В чем хитрость

Весь секрет заключается в использовании повторяющегося по вертикали фонового изображения, для создания иллюзии колонок с разным фоном. Для SimpleBits, я сделал изображение с декоративными полосками по краям, коричневой правой колонкой и широкой полоской белого цвета для области контента.

Фоновое изображение, для заполнения страницы по вертикали

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

CSS

Чтобы техника работала, достаточно одного простого правила:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Мы делаем фон страницы серым, а изображение многократно повторяем по вертикали (repeat-y). Цифры 50% 0 указывают, что изображение нужно центрировать относительно элемента body и начать повторять с самого верха страницы.

Позиционирование колонок

Позиционировать колонки можно любым удобным способом, для этого подойдет как float, так и абсолютное позиционирование.

Позиционирование колонок

Если вы хотите добавить границы или отступы для одной из колонок, и не получить при этом проблем в IE5.x нужно использовать исправления от Тантека Челика Box Model Hack или Mid Pass Filter, для IE6+ достаточно указать правильный DOCTYPE. Если в отступах или границах нет необходимости, и используются только поля, то эти исправления не нужны.

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

Примеры: разметка фиксированной ширины, резиновая разметка.

PS

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

Translated with the permission of A List Apart Magazine and the author[s].