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

Пример сайта с тремя колонками

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

Выше приведен код HTML для этой верстки, в котором указан блок, содержащий три колонки.

Проблема сайта с тремя колонками

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

Т.е., боковые меню будут разной высоты из-за разного содержимого внутри них.

Решение проблемы с тремя колонками

Создайте фоновое изображение

Одним из наиболее простых путей решения этой проблем является работа с фоном отдельно от структуры HTML. С помощью фона можно создать видимость одинаковых колонок. Вместо задания серого фона каждому боковому меню, зададим новый фон в виде изображения содержащему блоку:

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

Фоновое изображение содержащего блока будет повторяться по всей длине блока, которая будет зависеть от наиболее длинной колонки.

Демонстрация работы

Конечно, этот способ не ограничивается только верстками для веб-сайтов с тремя колонками.  Такое решение может пригодиться и в случаях с одним левым или правым боковым меню, или даже для верстки с большим количеством колонок. Посмотрите подробности в демонстрации работы.

Альтернативные подходы при работе с фоном для создания фальшивых колонок

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

Задав нужное направление и неизменяющиеся цвета, можно создать градиент, повторяющий нужный фон для примера выше, следующим образом:

background: linear-gradient(to right, #dadada 0%,#dadada 20%,#dadada 20%,#ffffff 21%,#ffffff 79%,#dadada 80%,#dadada 100%);

Вы можете попробовать создать подобные градиенты, например, с помощью генератора градиентов Colorzilla.

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

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

Автор идеи урока Iggy

Перевод — Дежурка

Смотрите также: