Боковые меню одинаковой высоты с помощью фальшивых колонок
14 июня 2018 | Опубликовано в css | Нет комментариев »
Иногда очень сложно создать код 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
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193