title: 100% height using Bootstrap grid system
body: <p>I'm having trouble with a page layout using a Bootstrap grid system. I simply want a left navigation div that contains a defined amount of links, but the nav should fill the rest of the page vertically until the end of the content div on the right. Using 100% height doesn't seem to be working in my case.</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div id="nav" class="col-xs-2 col-sm-2 col-md-2 col-lg-2"&gt;
      &lt;ul&gt;
          &lt;li&gt;Link&lt;/li&gt;
          &lt;li&gt;Link&lt;/li&gt;
          &lt;li&gt;Link&lt;/li&gt;
          &lt;li&gt;Link&lt;/li&gt;
          &lt;li&gt;Link&lt;/li&gt;
          &lt;li&gt;Link&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="main" class="col-xs-10 col-sm-10 col-md-10 col-lg-10"&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#nav {
      position: relative;
      height: 100%;
      background-color: green;
  }
  
  #main {
      height: 100%;
      background-color: yellow;
  }
  </code></pre>
  
  <p>Here is a fiddle for what I'm working with: <a href="https://jsfiddle.net/jLh4vxf4/" rel="nofollow">https://jsfiddle.net/jLh4vxf4/</a></p>
  
  <p>The horizontal layout is fine, I just can't get my nav to vertically end with my content. Thank you for any help.</p>