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

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 2

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 3

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