Как выйти из пределы контейнера?

Question

[ne_pes]

Есть конструкция

<div class="container">
    <div class="non-container"></div>
</div>

Контейнер выравнивается по центру и имеет максимальную ширину

.container{
position:relative;
margin:auto;
width:100%;
padding:0 20px;
box-sizing:border-box;
max-width:1100px;
}

Нужно, чтобы .non-container выходил за его пределы и был на всю ширину экрана всегда

Comments

[RAX7]

https://css-tricks.com/the-inside-problem/

Answer 1

[Mr Crabbz]

.non-container {
  width: 100vw; /* 100% ширины вьюпорта */
  position: relative;  /*включаем left */
  left: 50%; /* устанавливаем левый край non-container в центр container'a */
  transform: translateX(-50%); /* двигаем non-container влево на 50% его ширины */
}

Comments

[hzzzzl]

он будет на 100vw, но левый край будет выровнен по левому краю контейнера + паддинг, то есть справа будет выступать

[Mr Crabbz]

hzzzzl, обновил

[Сергей delphinpro]

Краб Анархист, 100vw != 100%. Первый включает полосу прокрутки, второй — нет.
При наличии вертикального скролла, блок с ширинной 100vw не поместится во вьюпорт и появится горизонтальный скроллбар.

[Сергей delphinpro]

Вот здесь я решал подобную проблему (и решил) Головоломка с раскладкой страницы. Решим?

Answer 2

[hzzzzl]

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

https://codepen.io/anon/pen/MdXEgP

Answer 3

[Антон Усачев]

Ну как вариант можно задать ему ширину 100% ширины экрана, нет?

.non-container {
    width: 100vw;
}