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

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

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

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

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

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

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

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

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

Перенос слов в CSS

Март 28, 2016 г.

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства - word-wrap и word-break. Работу с ними и ...

Читать

Прогресс бары, анимация загрузки...

Январь 11, 2019 г.

Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром. Основная особенность ...

Читать

 

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

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



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