title: Make nested div stretch to 100% of remaining container div height
body: <p>I have a container div, which I want to stretch to at least the entire height of the window. If there's a lot of content in the container div, I want it to stretch to more than the window's height. This works.</p>
  <p>In the container div I have an image. After/below the image, I have a second div. I want this nested div to stretch vertically to fill the remaining space of the container div. This doesn't work.</p>
  <p>I've tried to illustrate the problem in <a href="http://aronson-aminoff.com/XMPL/DIVS.jpg" rel="nofollow noreferrer">this image</a>. I want the div to stretch in the way illustrated in the <em>left</em> side of the right image, not as it looks on the <em>right</em> side of the right image.</p>
  <p>The following is my code. As you can see, in this code I don't even try to make the div under the image stretch vertically, as nothing has worked. &quot;Height: 100%&quot; doesn't do the trick, as I've defined &quot;100%&quot; to be the height of the window by default, in order to make the container div to stretch to at least the window's height.</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>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  body,
  html {
    height: 100%;
  }
  
  .container {
    display: block;
    overflow: auto;
    min-height: 100%;
    height: 100%;
    height: auto;
  }
  
  .bottom {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;img src="image.jpg" width="100%"&gt;
  
    &lt;div class="bottom"&gt;
      LOREM IPSUM
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>