title: How to have multiple columns that consume 100% height using twitter bootstrap?
body: <p>I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:</p>
  
  <ul>
  <li>I am using twitter bootstrap, so I would like a solution that is compatible with it</li>
  <li>The layout will look <a href="https://i.stack.imgur.com/L3P85.png" rel="noreferrer">like this</a>. Sorry I cannot embed the image because I need 10 pts first.</li>
  <li><a href="http://jsbin.com/ehizof" rel="noreferrer">This</a> is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.</li>
  <li>I will need the main content to expand the same as the sidebar.</li>
  <li>The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer</li>
  <li>Notice that the minimum height must be 100%</li>
  <li>The footer should move if the content grows too much (i.e. it would require scrolling to see it)</li>
  <li>I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).</li>
  <li>The page content is centered horizontally with a fixed width</li>
  </ul>