Как задать блоку который находится в контейнере ширину на весь экран?

Question

[viktorulyushev]

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

Comments

[Алексей Ярков]

У родительского контейнера отступы по бокам, а дочерний вы хотите на весь экран растянуть? 0_o

[Alexander Pushkarev]

Алексей Ярков: а что в этом такого? Вполне нормально практика

Answer 1

[Alexander Pushkarev]

Вот так - codepen.io/AXP/pen/WpqrjG

.full {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    margin-bottom: 30px;
}

При этом адаптивность сохранится

Актуально для всего кроме IE > 9 тут смотреть

Comments

[Алексей Корчагин]

Спасибо, до сих пор актуально!

[Павел Сидоров]

да, но у меня появляется горизонтальная прокрутка

[Alexprog1]

Спасибо. Помогло.

Answer 2

[Сергей Тутуков]

https://codepen.io/STutukov/pen/RpzrMb

position:relative;
    &:before,
    &:after{
      content:'';
      position: absolute;
      background:inherit;
      display: block;
      top:0;
      bottom: 0;
      width: 100%;
    }
    &:before{
      right: 100%;
    }
    &:after{
      left: 100%;
    }

Comments

[viktorulyushev]

чет жесть какая то ,почему такой синтаксис?

[Сергей Тутуков]

viktorulyushev: не совсем понял, что вы имели ввиду?
Думаю здесь только можно придраться к width :100%
Но можно написать width:calc((100vw - ширина контейнера)/2), как угодно.
Но я вижу, что вы отметили другое решение, которое противоречит вопросу ( фон был за пределами, а содержимое не выходило). Тем более то решение в старых браузерах не работает, что указано.

Answer 3

[iBird Rose]

ну тк раздели контейнер.

<section>
    <div class="container">
        111
    </div>
</section>
<section>
    <div class="container">
        111
    </div>
</section>
<section>
    <div class="container">
        111
    </div>
</section>