title: How to make a content div stretch from a header div to a footer div?
body: <p>I'm using Twitter Bootstrap's 'sticky footer' CSS to ensure my footer appears at the bottom of my page. How can I make my content (the blue div in the example) stretch all the way down to the footer (the yellow div in the example)? I've tried making <code>.content</code> 100% height but that has no effect. </p>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>html {
    position: relative;
    min-height: 100%;
  }
  body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
  }
  .content {
    height: 100%;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
  }
  </code></pre>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="header"&gt;This is my header&lt;/div&gt;
  &lt;div class="content"&gt;This is my content&lt;/div&gt;
  &lt;div class="footer"&gt;This is my footer&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Example:</strong> <a href="http://jsfiddle.net/pjktqnmo/1/" rel="nofollow">http://jsfiddle.net/pjktqnmo/1/</a></p>
  
  <p><strong>Ref:</strong> <a href="http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="nofollow">http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css</a></p>
  
  <p><strong>Update:</strong> My header contains my page title so the height of the header varies from page to page.</p>