title: Sticky Footer with page scroll in IE
body: <p>I try to make a responsive website which looks similar in Chrome, IE(11), and FF.</p>
  
  <p>My problem in IE is, that if the site is too long the scrollbar doesn't scroll to the end because of the sticky page-footer('page-footer'). I tried to give my page-main-area a margin or padding bottom but that doesn't change anything.</p>
  
  <p>Another thing is that my sidebar background doesn't fill to the end.</p>
  
  <p>CSS extract:</p>
  
  <pre><code>.page-sidebar {
      padding: 10px;
      border-top: 2px solid #000;
      background-color: #00BB9C;
      width: 100%;
      padding-bottom: 58px;
  }
  .page-sidebar h3 {
      color: black;
  }
  .page-sidebar h3:first-child {
      margin-top: 0;
  }
  
  .page {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      min-height: 100%;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
  }
  .page-main-area {
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
  
  }
  
  .page-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 8px;
      background-color: #000;
      color: #fff;
      max-height: 50px;
  }
  </code></pre>
  
  <p>HTML + CSS:</p>
  
  <p><a href="http://jsfiddle.net/mvz8rq1o/2/" rel="nofollow">http://jsfiddle.net/mvz8rq1o/2/</a></p>
  
  <p>What can i do to fix this in IE?</p>