Как в родителе-контейнере растянуть за его границы ребенка?

Question

[zjoin]

Ситуация такая. Есть container 980px, а внутри него div - надо растянуть по ширине экрана и залить своим цветом. Кто как решал такую проблему?

Answer 1

[Dima4jin]

jsfiddle.net/Dimadjin/TptXd

Див с шириной в 100% от ширины браузера задается только если он вне ограниченных по ширине дивов

Comments

[zjoin]

То есть если есть основной контейнер в котором меню контент и все остальное. Я его разбиваю, потом снова рисую контейнер убрав при этом всю его верхнюю часть?

[Dima4jin]

если стоит задача, чтобы макет был "зеброй", то есть ширина контента одна, но фон чередуется цветными полосами, то нужно каждый раз див с цветным фоном оставлять с шириной на всю страницу, а внутрь помещать блок с шириной контента jsfiddle.net/Dimadjin/TptXd/1

[Dima4jin]

да, вы правильно меня поняли.

[drinkmaker]

Вы не правы. Это возможно сделать. stackoverflow.com/questions/31391459/how-can-i-exp...

Answer 2

[Сергей Котов]

чтобы растянуть блок на всю ширину за предела родителя пропишите свойство width: 100vw;
margin-left: calc(-50vw + 50%);

Answer 3

[Юрий Лобанов]

Так не делается. Так сделать можно, но если у Вас возникло такое желание - значит нужно переверстать так, чтобы такого делать не надо было.
Вот, например jsfiddle.net/iiil/7Ly6y

Comments

[zjoin]

Дизайн так создается

[Юрий Лобанов]

@zjoin что это значит? Так нарисовал дизайнер? Он ведь Вам разметку не запрещал делать нормально?

[zjoin]

Так подходит для верхних блоков с position:absolute, а если это где-то внизу, да еще подгрузка контента

[Юрий Лобанов]

@zjoin ну а я о чем Вам говорю? Так не делается. Смотрите Ваш шаблон и пытайтесь сделать без дочернего элемента шире родительского.

Answer 4

[drinkmaker]

stackoverflow.com/questions/31391459/how-can-i-exp...

Comments

[zjoin]

и здесь https://css-tricks.com/full-width-containers-limit...

Answer 5

[Alexander Mischuk]

Никак. Подобные вещи продумываются на этапе создания разметки.

Comments

[Виктор]

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