+7 (812) 9-515-415

Контент по центру, фон по ширине

Одна из часто встречающихся задач в современной верстке — центрировать контент, а фоны растягивать. Или какой-то из блоков должен занимать всю ширину окна, а другие центрироваться.

Создадим специальный класс, назовем его контейнер .container, целью которого будет задавать ширину и располагаться по центру. Ширина при этом может быть фиксированна в px или задана в % или vw. Или, возможно, вам понравится вариант, когда ширина ограничена максимальным значением, а до него может спокойно растягиваться. Это лишь нюансы, принцип работы при этом останется неизменным.

Пусть заказчик поручил нам сверстать header с фиксированной шириной


<header class="header container">
  

Свои собственные уникальные стили будут написаны в классе .header, а центрирование задаст .container


.container {
    width: 700px;
    margin: 0 auto
    }
.header {
    padding: 20px 0;
    }
  

Но что делать, если в какой-то секции должен быть фон на всю ширину окна?

Поступают просто. Добавляют задающие фон стили для самой секции, а контент внутри нее оборачивают в div с классом .container


<section class="promo">
  <div class="promo-inner container">
    <h1>Компания Ромашка</h1>
    <p>Нашими ромашками можно украсить всё! </p>
  </div>
</section>

Поскольку содержимому блока потребуется задать свои уникальные стили, то нужно добавить второй класс (promo-inner)

See the Pen Контент по центру, фон по ширине by Websitio (@Websitio) on CodePen.

Это упрощенный пример, но не забывайте о том, что текст не должен прилипать к краям окна браузера вне зависимости от его ширины, позаботьтесь об отступах

Альтернативный вариант

Есть и другой способ сделать фон на всю ширину окна при фиксированной ширине контента.

Нужно сделать блок с фиксированной или ограниченной шириной, как у в предыдущем варианте и потом создать для него псевдоэлемент. Этому псевдоэлементу задать абсолютное позиционирование с top:0 и left: 50%; transform: translateX(-50%) для центрирования по горизонтали, высоту, равную 100% высоту родителя и ширину равную 100vw. Но, если высота сайта больше высоты экрана, т.е. уже есть вертикальная полоса прокрутки, то ширина в 100vw даст побочный эффект в виде горизонтальной полосы прокрутки. И её нужно будет скрыть, задав для body {overflow-x: hidden}.


body {
  overflow-x: hidden;
}
.section {
  position: relative;
  max-width: 768px;
}
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 100vw;
  height: 100%;
  background: #f00;
}
  

Мне больше симпатичен вариант с дополнительной оберткой (хоть и не люблю их), чем absolute, transform и еще и overflow, тем более на body.

Фон на половину окна

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

Задача делится на 2 случая. Первый - когда у текста фон безразличен:

See the Pen Фон на половину окна, контент фикс или ограниченный by Websitio (@Websitio) on CodePen.

В этом случае, когда картинка стоит в правой части блока, нужно задать overflow-x:hidden для body. Но, поскольку, это не очень красивый прием, всё таки создать дополнительную обертку на всю ширину окна и задать overflow для неё. Но в примере оставлю вариант без обертки.

И второй, когда фон под текстом должен быть однотонным и тоже доходить до края окна:

See the Pen Фон на половину окна, контент фикс или ограниченный. И фон со стороны контента тоже до края окна. by Websitio (@Websitio) on CodePen.

В обоих случаях для фона использованы псевдоэлементы.

Почитать:

Оглавление