body height to extend based on overlay's height
<p>I'm trying to achieve a layout where the background (green) is 100% of the height of the window and if there is an overlay, which extends beyond the fold, the height of the background should extend to accommodate the larger height.</p>

<p>The reason I have the <code>Overlay</code> in the <code>holder</code> is because I'm using React to show the overlay on top of the body, if this matters.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
  height: 100%;
}

#holder {
  background: green;
  width: 100%;
  min-height: 100%;
  position: relative;
}

#logo {
  height: 50px;
  width: 100px;
  display: block;
  background: blue;
}

#overlay {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  margin-top: -50px;
  min-height: 100%;
  z-index: 10000;
  position: absolute;
  display: block;
}

#information {
  height: 500px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='holder'&gt;
  &lt;div id='logo'&gt;&lt;/div&gt;
  &lt;div id='overlay'&gt;
    &lt;div id='information'&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/eu3hdw34/2/" rel="nofollow">https://jsfiddle.net/eu3hdw34/2/</a></p>