title: CSS Position absolute/overflow:scroll issue
body: <p>I have following HTML code:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="page" id="first"&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
          Test&lt;br/&gt;
  
          &lt;div class="nav bottom"&gt;&lt;a href="#second"&gt;Second&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="page" id="second"&gt;
      &lt;/div&gt;
      &lt;div class="page" id="third"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and following CSS code:</p>
  
  <pre><code>html, body { height:100% }
  #wrapper {
      height:100%;
      min-height:100%;
      min-width:100%;
      overflow:hidden;
      position:relative;
      width:100%;
  }
  .page {
      height:100%;
      overflow:scroll;
      position:relative;
      width:100%;
  }
  .nav {
      position:absolute;
      text-align:center;
      width:100%;
  }
  .nav.top {
      top:0;
  }
  .nav.bottom {
      bottom:0;
  }
  .nav a {
      display:block;
      height:25px;
      line-height:25px;
      margin:0 auto;
      width:160px;
  }
  </code></pre>
  
  <p>As you may see, wrapper is the element that "simulates" browser window, basically the idea is to create "scrollable" pages of the website.</p>
  
  <p>Everything works perfectly, but I'm facing one problem. If <code>div.page</code> has more content, scroll bar appear as expected, but the <code>.nav</code> <code>div</code> is positioned at the bottom of the browser window, not the <code>div#wrapper</code>.</p>
  
  <p>Does anybody know how to fix this issue?</p>