title: Making Twitter Bootstrap Columns the Same Height
body: <p>I have an ASP.NET MVC view with the following Twitter Bootstrap layour:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="container-fluid header"&gt;
          [Header content]
      &lt;/div&gt;
  
      &lt;div class="row-fluid"&gt;
          &lt;div class="span9"&gt;
              &lt;div class="container-fluid main-content"&gt;
                  [Main Content]
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="right-sidebar" class="span3"&gt;
              [Right Sidebar Content]
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is that my [Main Content] is much taller than my [Right Sidebar Content]. Since my [Right Sidebar Content] has a different background color, I would prefer that it ran all the way down to my footer (the full height of my [Main Content].)</p>
  
  <p>I tried setting <code>height: 100%</code> to the sidebar but that had no visible effect in Chrome. Can anyone see how to achieve this?</p>