CODEWITHSUNDEEP
htmlcsswidth
Tim Knobben
Tim Knobben

Reputation: 13

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*/
}

Upvotes: 1

Views: 657

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 5

Related Questions