Как сверстать этот фон?

Question

[Сергей]

Есть такой макет:

Показать

Как проще всего сделать фон, который растянут на всю ширину страницы и при этом равный высоте шапки основного контента? Высота шапки не фиксированная. Фон может быть как одноцветный, так и картинкой.

Comments

[Дима Долготер]

учишь сетку бутстрапа-вопросов становится меньше

[Сергей]

И чем она мне поможет в этой ситуации? Правильно - ничем.

[Антон Литвиненко]

а что вообще сайдбар делает в шапке?

[Сергей]

Ну шапка - это условное название, на самом деле это некая вступительная часть контента.

[Вадим]

Сергей, и в чём проблема сделать контейнер внутри "шапки", у которого будет фиксированная максимальная ширина, и в этом контейнере располагать контент? А сама "шапка" будет на всю ширину?

[Сергей]

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

[Вадим]

Сергей, Шапка поверх сайдбара? Или сайдбар поверх шапки?

[Сергей]

Вадим, сайдбар над фоном и должен начинаться там же, где и контент.

[Вадим]

Сергей, Так, зачем тогда думать как приподнять сайдбар, если контент на уровне основного контента?

[Вадим]

Сергей, Итак, я, кажется, понял..
Можно тогда попробовать сделать так:
"шапку" ограничить по ширине.
Сайдбар и контент в отдельном блоке, у которого будет 2 колонки.
Для шапки сделать псевдоэлемент, который будет абсолютно спозиционирован относительно "шапки", у которого будет высота, равная "шапке" (100%), а ширина равная ширине вьюпорта(100vh). И z-index: -1 у псевдлоэлемента, чтобы фон был под контентом "шапки".

[Вадим]

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

[Сергей]

Для шапки сделать псевдоэлемент, который будет абсолютно спозиционирован относительно "шапки", у которого будет высота, равная "шапке" (100%), а ширина равная ширине вьюпорта(100vh). И z-index: -1 у псевдлоэлемента, чтобы фон был под контентом "шапки".

Ну это первое, что пришло мне на ум, но дело в том, что 100vw учитывает ширину полосы прокрутки (а мне надо область без скроллбара). Это вызывает горизонтальный скролл, а правила overflow-x на родителе мне хочется избежать.

Answer 1

[Сергей]

Как вариант можно сделать всё на гридах, как описано в статье тут.