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

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

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

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

[code]

.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%;
}

[/code]

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

 

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

Добавить комментарий

Закрыть меню
×

Корзина