Делаем секцию на всю ширину экрана внутри элемента с ограниченной шириной

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

Как оказалась — задача с ходу не решалась.

В итоге нашли такое решение:

.home #page {
  max-width: 100% !important;
  width: 100%;
  overflow: hidden;
}

.home #content {
  width: 1020px;
  margin: 0 auto;
}

.home #panel-1-0-0 .fullwhite {
  margin: 0 -100%;
  padding: 0 100%;
}

Суть в том, что overflow: hidden (по сравнению с первоначальным вариантом) переносится с <body> на #page, а фиксированная ширина — с #page на #content.
Кроме #content, в #page больше ничего нет, поэтому на отображение других блоков это не влияет)

Этот пример нужно адаптировать под конкретную страницу.

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *