CSS решения. Фиксированный блок плюс адаптивный блок.

В данной статье поговорим об одной из базовых задач в вёрстке — создании фиксированного и адаптивного блоков; приведём решение данной задачи, а также разберём основные преимущества и недостатки описываемых решений.

В данной статье будем рассматривать два случая:

• old style — решение, которое должно работать в браузере IE9 и выше
• new style — использование flex’ов, а также большей части CSS3, которые поддерживает большинство современных браузеров.

Есть еще feature style — CSS grid, но это уже выходит за рамки статьи.

Одна из самых популярных задач в вёрстке — блок фиксированной ширины плюс адаптивный блок.

Old style

Для решения задачи в старом стиле используется следующий подход:

• Создаётся блок (div) и два дочерних блока
• Фиксированный блок идёт первым, которому задаётся фиксированная ширина width: 10rem и свойство float: left (или right, в зависимости от требуемого расположения).
• Адаптивный блок получает свойство float: none, а также отступ равный ширине фиксированного блока margin-left: 10rem (можно задать отступ больше, чем фиксированный блок, чтобы между фиксированным и адаптивным блоком была пустое расстояние).
• Если высота адаптивного блока может быть меньше высоты фиксированного блока, то тогда необходимо у родительского блока поставить явное автовыравнивание высоты (очистка плавающих блоков) с помощью overflow: hidden, или неявно с помощью утилиты clearfix;

HTML структура:

Для данного решения важен порядок. Сначала идут плавающие блоки, затем только блок с контентом.

Стили SCSS:

В результате получим:

В данном примере использовались дополнительные стили для создания превью:

В дальнейшем, мы будем опускать дополнительные стили, чтобы не мешать основному решению.

Если высота адаптивного блока меньше фиксированного, то тогда мы получим наезд ниже идущих блоков на родительский блок. Для демонстрации создадим блок под родительским блоком (.box) два абзаца со случайным контентом:

Для решения данной проблемы, воспользуемся утилитой clearfix из bootstrap:

В результате получим:

Отметим, что overflow: hidden привёл к тому же результату с одним лишь исключением, что при всплывающих блоках внутри родительского, контент будет обрезаться.

Преимущества:

• Работает во всех популярных браузерах.

Отметим, что для браузеров каменного века (IE ≤ 8), делается отдельное решение, которое не является частью основного проекта.

Недостатки:

• Невозможность лаконичной реализации дополнительной возможности — одинаковая высота фиксированного и адаптивного блока средствами CSS.

Лучшим решением в старом подходе для данной задачи является создание микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.

New style

Основным решением в данный момент является использование flex.

• Создать родительский блок и задать display: flex
• Для фиксированного блока задать свойство display: block и ширину width: 10rem
• Для адаптивного блока задать свойство flex: 1, которое заставляет блок занимать всё доступное пространство

В данном случае, реализация будет следующей:

Откроем в браузере:

Если добавить контент, то можно увидеть, что структура ведёт себя ожидаемо.

Преимущества:

• Порядок элементов является правильным;
• Блоки получают общую высоту, делая колонки одинаковой высоты без какой-либо манипуляции;
• Наезды на другие блоки в данном решении отсутствуют в сравнении со старым подходом.

Недостатки:

• Не работает в старых браузерах, которые не поддерживают flex.

Демо

Небольшая демонстрация выше приведенных решений:

Резюме

В данной статье рассмотрели классическую задачу верстки с фиксированным и адаптивным блоком.

Привели примеры реализации данной задачи в двух вариантах:

• old style — решение, поддерживаемое во всех популярных браузерах;
• new style — решение, для всех современных браузеров.

Разобрали нюансы, которые есть в старом подходе.

Спасибо за внимание!

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/medium-stories

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — fixed-adaptive.

git checkout fixed-adaptive

Код можно посмотреть в приложении frontend-css — https://github.com/Fafnur/medium-stories/tree/master/apps/frontend/css/src/app/fixed-adaptive

Ссылки

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.

Medium: https://medium.com/fafnur
Добавляйтесь в группу ВК: https://vk.com/fafnur
Добавляйтесь в группу в Fb: https://www.facebook.com/groups/fafnur/
Телеграм канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur

Предыдущие статьи:

1. Redux в Angular. Управление состояниями в Angular с помощью Ngrx и Nx.
2. Структура и подходы к организации экшенов, селекторов, редьюсеров и эффектов в Ngrx и Nx.
3. Тестирование сервисов в Angular с помощью Jest. Тестирование реактивной/асинхронной логики.
4. Тестирование Ngrx store в Angular. Методы и подходы для упрощения тестирование stat’ов Ngrx в Nx.
5. Сборка Typescript приложения с помощью Webpack.
6. Архитектура enterprise Angular приложений с использованием монорепозитория Nx.
7. Angular тестирование component с помощью Jest.