Как растянуть дочерний div за пределы родительского div?

Question

[HolmesInc]

Добрый день! при верстке макета уперся в такую проблему: необходимо, что бы дочерний div растянулся на всю длину экрана(за пределы родительского div). При этом можно использовать только css. Пробовал это реализовать с помощью отрицательного margin-left + width в px, но проблема в том, что этот блок должен оставаться динамичным, то есть при уменьшении диагонали экрана, он то же должен уменьшаться. Возможно ли это вообще реализовать так?

Answer 1

[Денис Инешин]

Примерно так можно, с помощью vw: jsfiddle.net/IonDen/64o1hehz

.parent {
    position: relative;
    width: 200px;
    height: 300px;
    background: #000;
    margin: 0 auto;
}

.child {
    position: absolute;
    top: 50px; left: 50%;
    width: 100vw; margin-left: -50vw;
    height: 100px;
    background: #f00;
}

Answer 2

[Семён Задорожный]

А если попробовать абсолютным позиционированием и размер в %

Comments

[Aleksandr]

блок будет занимать ширину в % от ширины родителя

[HolmesInc]

При изменении позиционирования блоки снизу наезжают

Answer 3

[barcik]

вот так без vw
jsfiddle.net/m41g3kmp/2
т.е. родителю родителя добавляем position: relative, а дочернему - absolute и left: 0