title: HTML/CSS need div to take 100% of vertical height of parent
body: <p>I am trying to create a web page represented at this fiddle...</p>
  
  <p><a href="http://jsfiddle.net/jeljeljel/5BSva/" rel="nofollow">http://jsfiddle.net/jeljeljel/5BSva/</a></p>
  
  <p>I want the vertical line for the left hand navigation under the tab to draw to the top of the footer sitting at the bottom of the page.</p>
  
  <p>The footer features need to remain.  That is if the page contents don't take up the entire page, the footer remains at the bottom.  And if the page contents exceed the height of the viewport, the footer gets pushed down.</p>
  
  <p>Can anyone solve this?  This one is challenging for sure.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="header"&gt;
          HEADER
      &lt;/div&gt;
      &lt;div class="body"&gt;
  
  
          &lt;ul class="nav nav-tabs" id="tabcontrol"&gt;
              &lt;li class="active"&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div class="tab-content"&gt;
              &lt;div class="tab-pane active" id="home" style=""&gt;
                  &lt;div class="navigation" style=""&gt;
                      navigation&lt;br /&gt;
                      navigation&lt;br /&gt;
                      navigation&lt;br /&gt;
                  &lt;/div&gt;
                  &lt;div class="content"&gt;
                      content
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;div class="push"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer center"&gt;
      &lt;div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"&gt;&lt;/div&gt;
      &lt;div&gt;
          FOOTER
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.body {
      border: 1px solid rgb(174, 174, 201);
      border-top: 5px solid rgb(174, 174, 201);
      border-bottom: 5px solid rgb(174, 174, 201);
      border-left: 2px solid rgb(174, 174, 201);
      border-right: 2px solid rgb(174, 174, 201);
      padding-bottom: 1000px;
      margin-bottom: -1000px;
  }
  
  /* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
  * {
      margin: 0;
  }
  
  html, body {
      height: 100%;
  }
  
  .wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -50px auto; /* the bottom margin is the negative value of the footer's height */
      overflow: hidden;
  }
  
  .footer {
      height: 50px;
      background-color: #f8f8f8;
  }
  
  .footer, .push {
      height: 50px; /* .push must be the same height as .footer */
      clear: both;
  }
  
  form {
      height: 100%;
  }
  /* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
  
  .navigation {
      float: left;
      width: 150px;
      border-right: 3px solid rgb(174, 174, 201);
      padding-top: 10px;
      white-space: nowrap;
  }
  
  .content {
      padding-top: 10px;
  }
  
  .nav {
      margin-bottom: 0px;
  }
  </code></pre>