CODEWITHSUNDEEP
css
Aditya kumar
Aditya kumar

Reputation: 166

How to Give child element full width of document when its container width is less than viewport width

<div class="container">
<div class="child">
</div>
</div>

.container {
width: 800px;
height: 200px;
margin:auto;

}

now I want to give child width same as viewport width.

ps: 100vw is not working

Upvotes: 0

Views: 78

Answers (1)

Temani Afif
Temani Afif

Reputation: 274024

Using 100vw isn't enough, you need to also center the element inside the container so it overflow equally on both sides.

Here is an example using flexbox to center:

.container {
  width: 300px;
  height: 150px;
  margin: auto;
  background:green;
  display:flex;
  justify-content:center;
}
.child {
  width:100vw;
  flex-shrink:0; /*to avoid the shrink effect*/
  height:100px;
  background:red;
  color:#fff;
}

body {
 margin:0;
}
<div class="container">
  <div class="child">
    some content
  </div>
</div>

You can also consider negative margin to achieve the same without flexbox:

.container {
  width: 300px;
  height: 150px;
  margin: auto;
  background: green;
}

.child {
  margin: 0 calc((300px - 100vw)/2);
  height: 100px;
  background: red;
  color:#fff;
}

@media (max-width:300px) {
  .child {
    margin: 0;
  }
}

body {
 margin:0;
}
<div class="container">
  <div class="child">
    some content
  </div>
</div>

Upvotes: 1

Related Questions