Создание выходящего за пределы html контейнера блока на web странице

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

На некоторых сайтах (например You Tube) контент растягивается на всю ширину экрана. Но такой подход используется намного реже.

Если открыть ту же страницу на экране достаточной ширины другого размера (ширины), то вы увидите то, что ширина контента не поменяется.

Но порой возникает необходимость растянуть какой-то элемент контента до одного из краев экрана. При этом отступ с противоположной стороны этого же блока должен быть такой же, как и остального контента.

Для того, чтоб реализовать такое специфичное расположение блока на странице понадобятся не стандартные решения. Но перед тем, как разобрать эти не стандартные решения разберем способ центрирования контента.

Ограничение ширины контентной части с помощью контейнера

Ограничивается ширина контента так называемым контейнером — HTML элементом, который является оберткой для всех элементов на странице с заданной максимальной шириной. Принято такому элементу давать класс .container, но это не какое-то строгое правило.

.container{ max-width: 1200px; }

Для того, чтоб контент не прилипал к боковым границам экрана при просмотре страницы на мобильных и планшетах задаются внутренние отступы по бокам контейнера.

Готовый css код подобного контейнера будет выглядеть так:

.container{

  max-width: 1230px;

  margin: 0 auto;

  padding: 0 15px;

}

• max-width: 1230px; — ограничиваем максимальную ширину при этом container сможет уменьшаться в размерах.
• margin: 0 auto; — выставляем контейнер по центру экрана
• padding: 0 15px; — задаем внутренние отступы безопасности не позволяющие “прилипать” контенту к краям экрана на мобильных и планшетах.

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

Создание выходящего за пределы контейнера блока

Я не зря первым делом рассматривал принцип ограничения ширины контента с помощью элемента container.

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

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

Как видим из промера необходимо задать боковой отступ блока padding-left. При этом размер отступа является динамической величиной для корректного отображения позиционирования блока относительно остального контента.

Для расчета бокового отступа используем css конструкцию:

box {

  padding-left: max(15px, calc(100% - 1200px) / 2);

}

• 15px — внутренний отступ. Аналогичный отступу безопасности контейнера на странице.
• 1200px — максимальная ширина контента.

Как это работает

С помощью функции calc осуществляется вычисление размера отступа динамически. Функция вычитает внутренний размер контейнера от 100% ширины страницы и делит полученное значение на 2. Таким образом получаем нужный размер отступа. 

Функция calc() в CSS позволяет вычислять значения свойств при помощи арифметических операций.

Функция max устанавливает боковой отступ безопасности в тот момент, когда ширина отступа становится меньше значения отступа безопасности (в моем примере 15px).

Функция max устанавливает максимальное значение из указанных в качестве аргумента.

Можно обойтись исключительно функцией calc, но при отображении на мобильных устройствах отступ станет равным нулю. В таком случае контент будет вплотную прилегать к краю экрана.