В этой статье я покажу, как задать цвета фона для страницы с несколькими колонками. Допустим, у нас есть web страница, изображенная на скриншоте. Как видите, она состоит из заголовка, основной части, которая включает три колонки, и хвостовика. Нам нужно чтобы центральная колонка имела один цвет фона, а правая и левая – другой. Решить задачу «в лоб», т. е. воспользоваться свойством background-color каждой из колонок, не получится. Так как колонки неодинаковой высоты, которая может изменяться, и заранее неизвестна. А фон, естественно, должен распространяться на всю высоту колонки, от заголовка до хвостовика. Поэтому мы используем другой метод. Зададим фоновый цвет только для центральной колонки, а две другие оставим прозрачными. В этом случае их фон будет определяться фоном контейнера (в данном случае это тег
), который мы спокойно можем изменять. Этот прием сработает, только если центральная колонка будет самой длинной. Посмотрим, как это обеспечить. Прежде всего, взгляните на разметку страницы.