скрыть навигацию

CSS без секретов

Ложные колонки - Faux Columns

Дэн Цедерхолм

 

Один из вопросов, которые мне задают, рассматривая мой сайт:
Как Вы добиваетесь того, чтобы цвет заднего фона вашей правой колонки растягивался на всю высоту страницы?

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


Вертикальная растяжка

Одной из некоторых обидных недоработок свойств CSS является тот факт, что элементы растягиваются по вертикали лишь настолько, насколько это им самим необходимо. То есть, если блок <div> содержит изображение высотой 200px, то этот <div> вытянется вниз только на 200px.

Появляется интересная дилема. Сначала вы используете блоки для разделения страницы, затем добавляете CSS, чтобы создать макет с колонками. В итоге одна колонка получается длиннее другой (см. рис.1). В зависимости от наполнения контейнера очень трудно получить макет с одинаковыми по высоте колонками, особенно когда колонки должны быть цветными.

 

figure1

Рис.1

 

Существует не много способов сделать колонки одного размера вне зависимости от наполнения блоков. Я нашел свое решение (только для макета с абсолютным позиционированием), которое выглядит достаточно простым. Эта маленькая уловка уже используется на некоторый сайтах.


Моя уловка

Этот простой секрет заключается в использовании фонового изображения, выровненного по вертикали, с целью создания иллюзии цветной колонки. Например, мое фоновое изображение выглядит, как рис.2 (пропорции изменены для демонстрации), с декоративным элементом слева, с белыми секциями для колонок содержания и рамкой в 1px, с декоративным элементом справа, который является зеркальным отражением элемента слева.

 

figure2

Рис.2

 

Все изображение не более 1px по высоте, но при вертикальной растяжке создает цветные колонки на всю высоту страницы, не обращая внимание на заполненность колонок содержанием.


CSS

Элементарные правила CSS добавляются в элемент <body>

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

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


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

С установкой фонового изображения макет расположится вверху страницы с установленными значениями padding и margin для левой и правой колонок см.рис.3

 

figure3

Рис.3

 

Внимание

Указывая значения border, margin, padding, не забывайте о том, что браузер IE/WIN 5/5.5 реализует блочную модель с ошибкой. В ближайшее время мы опубликуем статью, где рассказывается, что это за ошибка такая, и как ее обойти
(метод Тантека Целика "Box Model Hack").

Автор: Дэн Цедерхолм

copyright © 2005 перевод NetSkipper

Обсудить статью

 

в начало страницы