Tim Knobben Tim Knobben - 15 days ago 4
CSS Question

CSS How to make div 100% despite 80% div

I want to make the width of a div (divTwo) inside of another div (divOne) 100% width despite the 80% width of divOne. Is this possible?

JSFiddle: https://jsfiddle.net/u3mbjgp3/

HTML:

<div class="divOne">
<div class="divTwo"></div>
</div>


CSS:

.divOne {
width: 80%;
height: 250px;
background: #00ff00; /*green*/
}

.divTwo {
width: 100%;
height: 150px;
background: #000; /*black*/
}

Answer

If you want divTwo to take 100% of window width you can use 100vw

body,
html {
  margin: 0;
  height: 0;
}
.divOne {
  width: 80%;
  height: 250px;
  background: #00ff00;
}
.divTwo {
  width: 100vw;
  height: 150px;
  background: #000;
}
<div class="divOne">
  <div class="divTwo"></div>
</div>