Цвет фона за пределами div

Question

Как увеличить цвет фона за пределами div? Мой код:

.content-right{ 
    background-color: blue; 
    padding: 40px; 
    position: relative; 
} 
.content-right:after{ 
    position: absolute; 
    top: 0; 
    right: calc(1px - 100%); 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    content: ""; 
    } 

jsfiddle

Проблема заключается в том, что я получаю прокрутки (горизонтальная), и я не хочу, чтобы ... Я хочу, что красная часть будет расширена после этого черный, поэтому он достигает края экрана при любом разрешении, но без прокрутки ... Если я добавлю переполнение: скрытое, это не решит проблему.

Любые идеи?

Спасибо.

Answer 1

Перемещение псевдо влево, и сделать ширину этого 1000px.

Установить тень на него вправо, с 1000px смещением, и красный цвет

.main{ 
    background-color: #000; 
    height: 500px; 
} 
.content-right{ 
    background-color: blue; 
    padding: 10px; 
    position: relative; 
    height: 100px; 
} 
.content-right:after{ 
    position: absolute; 
    top: 0; 
    right: 0px; 
    width: 1000px; 
    height: 100%; 
    background-color: transparent; 
    box-shadow: 1000px 0px red; 
    content: ""; 
    z-index: -1; 
    } 

fiddle

Примечание: теперь элемент псевдо будет, вероятно, за пределами границ, но влево. Элементы, выходящие за пределы слева или сверху, не генерируют полосы прокрутки.

С другой стороны, тень простирается вправо. Но при вычислении макета тень не учитывается, поэтому это не будет генерировать полосы прокрутки.

Answer 2

Quick Fix, но по существу я сделал документ с переполнением-x значением скрытого, чтобы он НИКОГДА не производил горизонтальную полосу прокрутки. Если это проблема, я могу попытаться найти лучшее решение, но это то, что у меня есть до сих пор.

JSFiddle: https://jsfiddle.net/m4f4x3bt/3/

html, body{ 
    overflow-x: hidden; 
}