title: Limit scrollbars to content area when static header/footer are present
body: <p>There is this example for a web page with static header and footer:
  <a href="https://web.archive.org/web/20140620132337/http:/www.dkngstudios.com/company#faq" rel="nofollow">Site Link</a>
  (when looking at this webpage, please remove the transparent archive.org header by clicking on the red "X" top right)</p>
  
  <p>My question is, is it (easily) possible to limit the scrollbar to the actual (scrollable content) area -- in other words, the scrollbar should not extend over the static header and footer (like it does now).</p>
  
  <p><a href="http://jsfiddle.net/7S4Xx/48/" rel="nofollow">Here is a jsfiddle</a> showing the same: scrollable content with static headers and footers where the scrollbar goes over header and footer, but should be limited to the content box:</p>
  
  <pre><code>#content {
  width: 1024px;
  margin: 0 auto;
  padding: 60px 0;
  height:calc(100% - 120px);
  }
  </code></pre>
  
  <p>Here is an example of the current implementation:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color:#ff00ff;
      margin:0px auto;
  }
  .wrapper {
      width:100%;
      height:100%;
  }
  .container {
      width:1024px;
      margin:0px auto;
      height:100%;
  }
  header {
      width: 1024px;
      height: 60px;
      background: red;
      position: fixed;
      top: 0;
  }
  #content {
      width: 1024px;
      margin: 0 auto;
      padding: 60px 0;
      height:calc(100% - 120px);
      background-color:#fff;
  }
  footer {
      width: 1024px;
      height: 60px;
      background: red;
      position: fixed;
      bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;&lt;/header&gt;
          &lt;div id="content"&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;p&gt;HELLOWEEN&lt;/p&gt;
          &lt;/div&gt;
          &lt;footer&gt;&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>