DJAy DJAy - 5 months ago 7
CSS Question

Make div background 100% as much as window width

I have div content-3 which is inside container. I want to make this background color 100% for his height which may increase. I think this possible using css. Here is image of my requirement. enter image description here



*{padding:0; margin:0; box-sizzing:border-box;}
.container{margin: 0px auto; width: 80%; border: 1px solid #333;}
.content{min-height:50px}
.content-3{background:green}

<div class="container">
<div class="content content-1">content 1</div>
<div class="content content-2">content 2</div>
<div class="content content-3">content 3</div>
<div class="content content-4">content 4</div>
</div>




Answer

As a visual trick, you can add extra padding to the div and counteract using negative margins. However you have to add overflow-x:hidden to body to prevent horizontal scroll:

*{padding:0; margin:0; box-sizzing:border-box;}
.container{margin: 0px auto; width: 80%; border: 1px solid #333;}
.content{min-height:50px}
.content-3{
  background:green;
  padding-left:100%;
  padding-right:100%;
  margin-left:-100%;
  margin-right:-100%;
}

body{overflow-x:hidden}
<div class="container">
<div class="content content-1">content 1</div>
<div class="content content-2">content 2</div> 
<div class="content content-3">content 3</div>
<div class="content content-4">content 4</div>
</div>