title: DIV set to overflow:scroll, but wont scroll all the way to bottom
body: <p>I have a <strong><em>DIV</em></strong> menu that is set to 100% height with a <strong><em>overflow:scroll</em></strong>.  Within the <strong><em>DIV</em></strong> I have a <strong><em>ul li</em></strong>. The problem I have is that it wont let me scroll all the way down to see the last <strong><em>li</em></strong>. I can barely see it. </p>
  
  <p>I think it has something to do with my <strong><em>header</em></strong> because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last <strong><em>li</em></strong>.</p>
  
  <p>Both <strong><em>li</em></strong> and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS. </p>
  
  <p>Why cant I scroll all the way to the bottom? What is the solution?</p>
  
  <p>Sample here: <a href="http://jsfiddle.net/D5KU3/2/">http://jsfiddle.net/D5KU3/2/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;!--header--&gt;
   &lt;div class="header"&gt;
   &lt;/div&gt;
  &lt;!--end header--&gt;
  
  &lt;!--left--&gt;
   &lt;div class="left"&gt;
  
  &lt;!--ul starts here--&gt;
  
    &lt;ul&gt;
  
    &lt;li class="hybrid"&gt;
  
      &lt;a href="#"&gt;
      &lt;p class="title"&gt;Why Cant&lt;/p&gt;
      &lt;p class="type"&gt;I scroll all the way to the bottom&lt;/p&gt;&lt;/a&gt;
  
    &lt;/li&gt;
  </code></pre>
  
  <p>Repeat <strong><em>li</em></strong> 20 times</p>
  
  <pre><code>  &lt;/ul&gt; &lt;!--ul ends here--&gt;
  
    &lt;/div&gt; &lt;!--container ends here--&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>  body, html {
    height:100%;  
    }
  
    body {
    background:white;
  
    }
  
    .container {
    width:260px;
    height:100%;
    overflow:hidden;
    background:silver;
    margin:0 auto;
    font-family:sintony;
    }
  
    .header {
    width:100%;
    height:60px;
    background:#000;
    }
  
    .left {
    width:260px;
    height:100%;
    background:#fff;
    float:left;
    overflow:scroll;
    }
  
  
   li.hybrid a {
   display:block;
   background:#16BF14;
   height:60px;
   width:260px;
   text-decoration:none;
   position:relative;
   }
  
  
  
   li.purple a {
   display:block;
   background:#3370CC;
   height:60px;
   width:260px;
   text-decoration:none;
   position:relative;
   }
  
   p.title {
   position:relative;
   padding-left:10px;
   }
  
   p.type {
   font-size:12px;
   position:relative;
   padding-left:10px;
   }
  
   ul {
   margin:0;
   padding:0;
   }
  
   li p {
   margin:0;
   padding:0;
   list-style-type:none;
   }
  </code></pre>