title: Scrolling element without scrollbar with CSS
body: <p><a href="http://jsbin.com/akEduMo/1/edit?html,css,output" rel="nofollow">JSbin here for visuals and code.</a></p>
  
  <p>Left sidebar, full height, fixed position, content overflows that needs to be accessible WITHOUT scrollbars (that means no <code>overflow: scroll</code>).  I really don't want to do this in Javascript.</p>
  
  <p>At one point months ago, I accomplished this in CSS with <code>overflow: hidden</code> and something else and now I can't find the code or remember how it was done.  And Google is useless for this for some reason.  This sidebar has content to the right of it on my site that continues down the page.  The bar itself has more than fits vertically on the screen.</p>
  
  <p>I need to be able to scroll down this object, whether it's fixed or absolute, and it must span the height of the page all the way down.  Scrolling main content and the sidebar are independent.  So far, even with setting to absolute, the wrapper will stop way short of the page bottom.</p>
  
  <p>I've tried every combination of <code>position</code>, <code>float</code>, <code>overflow</code>, <code>height</code>/<code>max-height</code>, <code>top</code>, <code>bottom</code>, <code>left</code> and <code>display</code> that I can think of.  Tried lots of other stuff too with no luck.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>CSS:</p>
  
  <pre><code>#left-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    max-width: 24em;
    height: 100%;  
    overflow: hidden;
    background-color: rgba(26,26,26,1);
  }
  #left-bar {
    max-width: 100%;
    max-height: none;
    position: relative;
  }
  #left-bar.sidebars .block {
    padding: 5%;
    border-right: none;
    margin:  5%;
    background-color: rgba(255,255,238,0.4);
    margin-bottom: 1.5em;
    font-size: 0.9em;
    overflow: hidden;
  }
  .sidebars .block ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sidebars h2 {
    padding: 0;
    margin: 5% 10% 0;
    font-size: 1.75em;
    text-transform: lowercase;
    font-weight: 400;
    text-align: right;
    /*border-bottom: 1px dashed #9c561b;  
    color: #9c561b;
    text-shadow:#130b08 0 1px 0;*/
  }
  #left-wrap a {
    color: #FDC;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="left-wrap"&gt;
    &lt;div id="left-bar" class="sidebars"&gt;
        &lt;div class="block"&gt;
          &lt;h2&gt;Title One&lt;/h2&gt;
          &lt;ul class="menu"&gt;
            &lt;li&gt;Link One&lt;/li&gt;
            &lt;li&gt;Link Two&lt;/li&gt;
            &lt;li&gt;Link Twenty-five&lt;/li&gt;
            &lt;li&gt;Link Seventy&lt;/li&gt;
            &lt;li&gt;Link One Hundred Fifty-two&lt;/li&gt;
            &lt;li&gt;Link Zero&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Two&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
        &lt;/div&gt;      
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Three&lt;/h2&gt;
          &lt;ul class="menu"&gt;
            &lt;li&gt;Link One&lt;/li&gt;
            &lt;li&gt;Link Two&lt;/li&gt;
            &lt;li&gt;Link Twenty-five&lt;/li&gt;
            &lt;li&gt;Link Seventy&lt;/li&gt;
            &lt;li&gt;Link One Hundred Fifty-two&lt;/li&gt;
            &lt;li&gt;Link Zero&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Four&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
        &lt;/div&gt;      
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Five&lt;/h2&gt;
          &lt;ul class="menu"&gt;
            &lt;li&gt;Link One&lt;/li&gt;
            &lt;li&gt;Link Two&lt;/li&gt;
            &lt;li&gt;Link Twenty-five&lt;/li&gt;
            &lt;li&gt;Link Seventy&lt;/li&gt;
            &lt;li&gt;Link One Hundred Fifty-two&lt;/li&gt;
            &lt;li&gt;Link Zero&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Six&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
        &lt;/div&gt;      
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Seven&lt;/h2&gt;
          &lt;ul class="menu"&gt;
            &lt;li&gt;Link One&lt;/li&gt;
            &lt;li&gt;Link Two&lt;/li&gt;
            &lt;li&gt;Link Twenty-five&lt;/li&gt;
            &lt;li&gt;Link Seventy&lt;/li&gt;
            &lt;li&gt;Link One Hundred Fifty-two&lt;/li&gt;
            &lt;li&gt;Link Zero&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="block"&gt;
          &lt;h2&gt;Title Eight&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>