How to make a child div full width of browser's viewport ignoring parent's position (margin & padding) and width

Question

This image describes the story. I want to make purple div same as green div . Can someone explain me how to make a child div full width while parent's margin & padding is unknown ?

<div class="parent">
   <div class="child1">
   </div>
   <div class="child2">
   </div>
</div>

I am mainly stuck at adjusting child div's margin & padding.

Note : parent div's width is margin & padding is unknown plz checkout the image red portion is parent and purple color is child, I want the purpule portion come out and take the full width of viewport

Depends what you want to achieve. `position: fixed` sets the div relative to the body, instead of the parent, maybe that helps. Else try to make your end result clearer (screenshot or example), because right now it's hard to understand what you need. — elveti, Dec 18 '18 at 15:34
@elveti Thanks for your response. I have added an image , can you check this out [link](https://i.stack.imgur.com/MND77.png) Here red is parent div and purple & green are child. I want to make purple div same as green div . — Faisal Ahmed, Dec 18 '18 at 16:08

score 0 · Answer 1 · answered Dec 18 '18 at 15:35

0

You can use width: 100%; in your CSS.

.child1 {
width: 100%;
}

<div class="child1"></div>

answered Dec 18 '18 at 15:35

Jakob

1,858
2
15
26

Thanks for your response. I have added an image , can you check this out [link](https://i.stack.imgur.com/MND77.png) Here red is parent div and purple & green are child. I want to make purple div same as green div . – Faisal Ahmed Dec 18 '18 at 16:09

ksav · Answer 2 · 2018-12-18T16:27:49.803

A block-level element always starts on a new line and takes up the full width available

If that parent container has padding, the child can still only take up the available space that is left within the content area.

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
}

.child {
  background: #7C73A5;
}

<div class="parent">
  <div class="child">
    child1
  </div>
  <div class="child">
    child2
  </div>
</div>

If you know the amount of padding the parent container has, you can apply negative left & right margins (of the same amount) to the children. This is commonly seen in CSS framework grid systems.

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
  
}

.child {
  background: #7C73A5;
  margin-left: -10px;
  margin-right: -10px;
}

<div class="parent">
  <div class="child">
    child1
  </div>
  <div class="child">
    child2
  </div>
</div>

If you don't know the parent padding but only have a single child, you can use position: absolute; left: 0; right: 0 as long as the parent is positioned.

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
  position: relative;
}

.child {
  background: #7C73A5;
  position: absolute;
  left: 0;
  right: 0;
}

<div class="parent">
  <div class="child">
    child1
  </div>
</div>

Now when you want the child to be full screen, you can now toggle between absolute and fixed to get it from one state to the other.

$(".children").click(function() {
  $(this).toggleClass("is-fixed")
});

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
  position: relative;
  height: 100px;
}

.children {
  background: #7C73A5;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.is-fixed {
  top: initial;
  background: green;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="children">
    click to toggle between absolute/fixed
    <div>child1</div>
    <div>child2</div>
    <div>child3</div>
  </div>
</div>

Thanks for your response. I have added an image , can you check this out [link](https://i.stack.imgur.com/MND77.png) Here red is parent div and purple & green are child. I want to make purple div same as green div . — Faisal Ahmed, Dec 18 '18 at 16:06
Ok. You need to toggle between `position:absolute` and `position:fixed` with a bit of js/jQuery. ` Check the last snippet. — ksav, Dec 18 '18 at 16:11
great!. But in case of multiple child they are collapsing into single one . can you help me with this issue please :) — Faisal Ahmed, Dec 18 '18 at 16:25
I feel like this question should have already been marked as answered. If you have more questions, ask another one and we will help you :) https://stackoverflow.com/questions/ask — ksav, Dec 18 '18 at 16:36

How to make a child div full width of browser's viewport ignoring parent's position (margin & padding) and width

2 Answers2