CODEWITHSUNDEEP
htmlcss
Morpheus
Morpheus

Reputation: 997

Background color outside div

How can I extend background color outside div? My code:

.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

The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.

Any ideas?

Thanks.

Upvotes: 1

Views: 9530

Answers (2)

vals
vals

Reputation: 64184

Move the pseudo to the left, and make the width of this 1000px.

Set a shadow on it to the right, with 1000px offset, and color red

.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

Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.

On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.

Upvotes: 4

pandavenger
pandavenger

Reputation: 1027

Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.

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

html, body{
  overflow-x: hidden;
}

Upvotes: 1

Related Questions