100% wrapper height expands with the growth of 100% of children

Question

How do I get a div wrapper that is 100% height to expand it with the height of my children? It is also 100% high.

The setup is as follows:

<div id="wrapper" style="height:100%"> <div class="child" style="height:100%">div1</div> <div class="child" style="height:100%">div2</div> </div> 

But the wrapper does not expand to 200% of the height. I tried to make a wrapper min-height:100%; , but then the children do not inherit the entire height, but only the height of their own content.

https://jsfiddle.net/on78pof8/

(box with watercolors, not expandable)

Answer 1

Set height in view units in child divs

 .child { height:100vh; } 

Demo (with view units)

(NB: OP is actually interested in the background image on the wrapper, not the solid aqua color)

 html, body { height: 100%; } #wrapper { background: aqua; } .child { height: 100vh; } 

 <div id="wrapper"> <div class="child">div1</div> <div class="child">div2</div> </div> 

---

If you don't want to use view units (which, by the way, as pointed out by @CoadToad in the comments), very good support ) - then I think you will have to use javascript.

Demo (with javascript)

Answer 2

Please tell me if I understood the question correctly. I think you forgot to add width:100%; into child divs.

To remove the extra scrollbar on html / body, you can remove the default margin / padding html and body with this declaration:

 html,body{ margin:0; padding:0; } 

Here is what I think you have in mind:

 html, body { height: 100%; margin:0; padding:0; } #wrapper { background: aqua; height: 100%; overflow: auto; } .child { height: 100%; width: 100%; } 

 <div id="wrapper"> <div class="child">div1</div> <div class="child">div2</div> </div> 

Answer 3

If you need a dynamic number for the height of the child divs, depending on your needs, you can set them from the height of the viewport (vw), but this assumes that you want each one to be the full height of the entire document.

Answer 4

To do this, you need to set overflow-y: auto for the parent. Here:

 html,body { height:100%; margin: 0; } #wrapper { background:aqua; height:100%; overflow-y: auto; } .child { height:100%; } 

 <div id="wrapper"> <div class="child">div1</div> <div class="child">div2</div> </div>