Рецепт для верстальщика: «блок над блоком»

Рецепт для верстальщика: «блок над блоком»

Столкнулся я однажды с интригующей, интересной и простой задачей одновременно. Мне понадобилось «разместить один блок над другим, но чтобы общий контейнер тянулся от наибольшего». Звучит просто… Но при этом был ряд дополнительных ограничений. Все же давайте по порядку.

Если у вас нет времени и вам не интересна предыстория – нажмите сюда и перейдите сразу к решению!

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

Example of task

Первоначальная реализация была самая очевидная. Второй список заворачиваем в некий контейнер с позиционированием relative. Добавляем в него же блок с прозрачностью и сообщением, и немного отступаем, чтоб было видно поле выбора. Вот схематический пример:

See the Pen Case: layout above layout by Stanislav (@slavko23) on CodePen.

Этот вариант вполне применим при определенных условиях, если скажем у вас фиксированный блок / статическое сообщение / определенный набор полей во втором списке. Но в моей ситуации все было немного усложненно условиями. А именно:

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

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

Хотелось решить задачу без использования js… и немного поразмыслив, было найдено решение.

Решение заключается в следующем:

В контейнер, который имеет очищение потока (с помощью, свойства overflow / псевдоэлементов / или элемента в конце с необходимыми свойствами) добавляем два дочерних. Один для списка, второй для блока наложения. Оба имеют свойства обтекания (float) и один из них отрицательный внешний отступ (margin). Вот и вся магия, пример:

See the Pen Solution: layout above layout by Stanislav (@slavko23) on CodePen.

Мне ничего не удалось найти схожего по запросам типа: «блок над блоком с тянущимся контейнером по контенту большего» / «div above div with common stretch wrapper» и подобным, по этому родилось данное решение, а за ним и рецепт. Успехов!

Обратите внимание! Проект на Бета версии Подробнее