Верстка слоя-подкладки во всю ширину viewport

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

Если шаблон изначально верстается с учетом таких особенностей шаблона, то максимальная ширина контентной области ограничивается внутри каждого wrapper-контейнера. Каждый отдельный горизонтальный блок при этом имеет ширину равную 100% ширины документа.

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

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

То растянуть фон на всю ширину документа для выбранной секции можно используя следующую технику (добавляем в CSS):

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

Написать комментарий

Мало букафф? Читайте есчо !

Битые картинки vs CSS

Февраль 6, 2021 г.

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как ...

Читать

Переполнение текста (text-overflow)

Сентябрь 3, 2021 г.

Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком. CSS предоставляет специальное свойство для ...

Читать

 

Комментарии к «Верстка слоя-подкладки во всю ширину viewport»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: