title: Make two columns the same height
body: <p>I'm trying to make a 2 column design (using <a href="http://twitter.github.com/bootstrap/" rel="noreferrer">Twitter Bootstrap</a>) with 2 columns of equal height.</p>
  
  <p>Let's take this example:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row-fluid"&gt;
      &lt;div class="span2"&gt;
          &lt;ul&gt;
              &lt;li&gt;Item 1&lt;/li&gt;
              &lt;li&gt;Item 2&lt;/li&gt;
              &lt;li&gt;Item 3&lt;/li&gt;
              &lt;li&gt;Item 4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="span10"&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​
  Because <code>.span2</code> is the highest of the two columns, it makes <code>.row-fluid</code> stretch to accommodate its height.
  After reading <a href="http://www.tutwow.com/htmlcss/quick-tip-css-100-height/" rel="noreferrer">this article</a>, I was expecting that setting <code>min-height: 100%</code> on <code>.span10</code> would make it stretch to the full height, but it doesn't:</p>
  
  <p><img src="https://i.stack.imgur.com/7pXh7.png" alt="Screenshot"></p>
  
  <p><a href="http://jsfiddle.net/WTNeB/1/" rel="noreferrer">http://jsfiddle.net/WTNeB/1/</a></p>
  
  <p>Why is that? Any solution to make <code>.span10</code> stretch to its parent height, avoiding setting a fixed height, to keep this design flexible?</p>