title: HTML Sticky Footer Problem
body: <p>Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar).  When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom".  So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar.  I am wondering if my absolute positioning is problematic on the main-content-inner.  That div is expandable in height.</p>
  
  <p><img src="https://i.stack.imgur.com/c2o8s.jpg" alt="Problem Screenshot"></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div id="page-wrap"&gt;
    &lt;div id="main-content&gt;
      &lt;div id="main-content-inner&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footerpush"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;copyright info&lt;/div&gt;
  
  
  #page-wrap {
  width:100%;
  min-height:100%;
  height:auto;
  height:100%;
  margin-bottom:-20px;
  position:relative;
  overflow:auto;
  
  }
  #main-content {
  width: 100%;
  height:100%;
  margin-left: -295px;
  position:relative;
  }
  #main-content-inner {
  left: 560px;
  border-radius:8px;
  border-style:solid;
  border-width:2px;
  border-color:#53D8FF;
  padding:20px;
  padding-bottom:0;
  background-color:#000000;
  position:absolute;
  top:100px;
  min-width:60%;
  max-width:60%;
  }
  #footer {
  
  text-align: right;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  color: #A7A9AC;
  font-size: 12px;
  height:20px;
  
  }
  
  .footerpush
  {
  height:20px;
  }
  </code></pre>
  
  <p>If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div.  So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should.  So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?</p>
  
  <p>Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?</p>