title: Make bootstrap column touch the bottom of the div
body: <p>I have no idea how to do this, essentially I want the columns to touch from top of div to bottom of div when said div has a <code>min-height</code> of 100%.  But this does not work:</p>
  
  <pre><code>html, body {
    height: 100%;
  }
  
  body {
    max-width: 1500px;
    margin: 0 auto;
  }
  
  #wrapper {
    min-height: 100%;
    overflow: auto;
  }
  
  .container {
    min-height: 100%;
    overflow: auto;
  }
  
  .container .row .col-md-6 {
    min-height: 100%;
  }
  </code></pre>
  
  <p>The wrapper extends to the bottom of the page, but the container div does not. It only extends to the end of the content contained with in.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title of the document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;&lt;/div&gt;
                  &lt;div class="col-md-6"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there something I am missing? The body and html go 100%, the wrapper goes 100% of that and then the container doesn't go 100% ... why?</p>