Make Div Inside Parent 100% Width of Body, Not Parent Div

CSS make div 100% width relevant to body and not it's parent div

The only way to do this while keeping the relative and absolute positioning as you have in your code is to use JavaScript. You need to get window width and set that as the div width. You also need to detect window size on resize so you always have your div adjust set to the current window width.

The other 2 ways you can do this may not be options for but worth mentioning

1. Put the child div outside the parent div.
2. Or set it to fixed position. Doing this may not give a desirable effect. The div will always be in the same position regardless of page scroll.

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Inner div width/height to 100% body size not parent div with side JS

https://jsfiddle.net/mcxwnwy3/

I suggest you start fiddling with vh and vw. A better solution would be to make all elements siblings and use the z-index property instead of nesting them. That way you can use % for all elements.

setting fixed width with 100% height of the parent

You can use width: calc(100% - 100px) or flex: 1 for the right div.

Percentage values are calculated from the parent element, therefore you need to extract static values from 100% to get the remaining area.

But as you are already using a flex container here, you can just set flex: 1, which is the shorthand for flex-grow: 1, that will allow your container to take all the extra space in the parent container, since no other items are available.

Why does my div not take its parent div's width?

There are a couple ways to achieve what you want. I do understand why you need it to be fixed with what I think you are trying to achieve. That is also what is causing the problem. Setting position "fixed" removes the element from the document flow.

Because you have already hard coded the left-nav width, adding the following to what you already have will work for you.

    #header {
        right:0;
        left:250px;
    }

If you want to line the fixed element up with the content, you will need to take a couple of things into account.

1. The body has a max-width of 1200px. That means, you have to take that into account when figuring this out, and it can get tricky.
2. The auto margin is something you can never know exactly without using another reference.
3. For screens smaller than 1200px, you need to add a media query. Anything under 100% will not work normally below 1200px with the calculation. Additionally, in order to align the right edges, you need to add a fixed margin to the #content and right offset the header the same amount. If you don't care about the right edges, you can just right offset the header however much you want.

    #content {
      /* ... other css you had */
      margin-right:15px;
    }
    #header {
         /* ... other css you had */
         text-align:center;
         left: 250px;
         right: 15px;
    }
    @media screen and (min-width:  1200px) {
        #content {
           margin-right:0;
        }
        #header {
          left: calc(((100% - 1200px ) /2) + 250px);
          right: calc((100% - 1200px) /2);
        }      
    }

So all that will work, but calc slows down rendering (some), and my sense is that this will be something that you end up having to change in the future. I recommend finding another way to achieve your goal. However, within the constraints you have given, the above will work.

Set div to 100% height of parent even when viewport is larger than parent

you should use "position:relative;" for parent div,
test this :

<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
  <body style="height:100%; margin:0; padding:0">

    <div style="position:relative; height:2000px; margin:0; padding:0; background-color:red">
      // Background div.
      <div style=" position:absolute; top:0; height:100%; width:100%; min-width:100%; background-color:blue">
      </div>

      // More divs with content on top.

    </div>
  </body>
</html>

---

Related Topics