100% height div wrapper expand with 100% height children

Question

How do I get a wrapper div that is 100% height to expand its with the height of its children? That are also 100% in height.

The setup looks like this:

<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 dosen't expand to 200% height. I have tried making the wrapper min-height:100%; but then the children don't inherit the full height, only the height of their own content.

https://jsfiddle.net/on78pof8/

(The aqua colored box, dosen't expand)

Answer 1

Set height in viewport units on the child divs

.child {
  height:100vh;
}

Demo (with viewport units)

(NB: The OP is actually interested in background image on the wrapper instead of 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 viewport units (which by the way - as @CoadToad pointed out in the comments - has very good support ) - then I think you'll have to use javascript.

Demo (with javascript)

Answer 2

Please tell me if I didn't understand the question correctly. I think you have forgotten to add width:100%; to the child divs.

To remove the extra scroll bar on the html/body, you can remove the default margin/padding of html and body by using this declaration:

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

Here is what I believe 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

如果你想要一个动态数字作为子div的高度，根据你的需要，你可以从视口高度（vw）设置这些，但这假设你希望它们都是整个文档的整个高度。

Answer 4

You need to set overflow-y: auto on the parent for this to work. 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>