title: How to avoid the fixed footer overlapping with the vertical scroll bar appears between header and footer
body: <p>I have below example where the footer is at the bottom and it overlaps with the vertical scroll bar.</p>
  
  <p>I have some pages where the vertical scroll bar would not be there (the inner content would be less). pages with no vertical scroll bar have no issues but pages with vertical scroll bar would have overlapping footer. So How to make footer display works properly irrespective of the vertical scroll bar.</p>
  
  <p><a href="http://codepen.io/anon/pen/GZgKaL#0" rel="nofollow">Codepen example</a> </p>
  
  <hr>
  
  <p>Or view the demo below:   </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100%;
    width: 100%;
    margin: 0px;
    overflow: hidden;
  }
  header {
    background: red;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
    height: 100px;
    border: 10px solid black;
    color: white;
  }
  #content {
    position: absolute;
    margin: 0px;
    left: 363px;
    right: 0px;
    top: 120px;
    bottom: 1px;
    width: 1557px;
    z-index: 0;
    padding: 10px;
    border: 1px solid rgb(187, 187, 187);
    overflow: auto;
    display: block;
    visibility: visible;
    background: rgb(255, 255, 255);
  }
  #content-inner {
    height: 844px;
    overflow: auto;
    width: 100%;
    right: 0;
    left: 0;
    position: absolute;
  }
  footer {
    background: blue;
    color: white;
    height: 80px;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid green;
    z-index: 999999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;CSS - Width&lt;/title&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      Header
    &lt;/header&gt;
    &lt;div id="content"&gt;
      &lt;div id="content-inner"&gt;
        scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;content outside
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;scrollable content
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;End
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;br/&gt;Actual End
  
      &lt;/div&gt;
      &lt;footer&gt;
        Footer
      &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>