title: getting sidebar column to extend to bottom of page
body: <p>I am working on getting a two column layout that extends to the bottom of my page.
    However, my sidebar cuts off at the <code>container-fluid</code> height even though I am trying to get it to extend to the whole page.  </p>
  
  <p>What is weird is that my content column works fine.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid columns no-margin fill"&gt;
          &lt;div id="sidebar" class="span2 columns no-margin right-edge"&gt;&lt;/div&gt;
          &lt;div id="contentWrapper" class="span10 columns no-margin pull-right"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body, form {
      height: 100%;
      min-height: 100%;
      background-image:url("../../images/lightGreyBackground.png");
      background-repeat: repeat;
      font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
  }
  .container-fluid {
      margin: 0 auto;
      height: auto;
      padding: 0px;
  }
  .columns {
      height: 100%;
      min-height:100%;
      margin: 0px;
      width: 100%;
  }
  .fill {
      position: absolute;
      height: 100%;
      min-height: 100%;
  }
  .no-margin {
      margin-left: 0%;
      width: 100%;
  }
  .right-edge {
      border-right: 1px;
      border-right-style: solid;
      border-right-color: #CCCCCC;
  }
  #sidebar {
      background-color: White;
      padding-top:15px;
  }
  </code></pre>