title: html - stretching container height to fit screen
body: <p>I have the HTML below, where I want the container div to stretch to the full height of the window. This works wine, but what happens when you remove two of the blue divs inside the container? The container stretches to the bottom of the blue div inside of it, but not to the bottom of the window. Solution?</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/xnt014a8/" rel="nofollow noreferrer">https://jsfiddle.net/xnt014a8/</a>  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  
     &lt;style&gt;
        body, html {
           min-height: 100%;
           padding: 0;
           margin: 0;
        }
  
        #container {
            height: 100%;
            background: coral;
            padding: 0;
            margin: 0;
            width: 63.4%;
            margin-left: 36.6%;
            min-height: 100%;
        }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
       &lt;div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"&gt;&lt;/div&gt;
       &lt;div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"&gt;&lt;/div&gt;
       &lt;div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>