title: Fixed position won't let me scroll and relative position won't stretch the div
body: <p>thanks for helping out. I have a site with a container div that I'd like to stretch to the bottom of the page. Using <code>position: fixed</code> I'm able to achieve this, but the footer text on the bottom is cutoff and you are unable to scroll down.</p>
  
  <p>Using <code>position: relative</code> I'm able to scroll, but the container div does not stretch to the bottom of the page.</p>
  
  <p>My code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    position: relative;
    bottom: 0;
    top: 0;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: auto;
    background-color: #1b1a1a;
  }
  
  .body {
    width: 703px;
    min-height: 340px;
    margin: auto;
    background-color: #f2f2f2;
    padding: 20px;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="body"&gt;
      content content content
    &lt;/div&gt;
    &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>