Position fixed sidebar with overflow scroll not scrolling to bottom

Question

I am trying to implement a fixed sidebar with dynamically loaded items onclick a Load More button.

I am attaching a class fixed to the parent sidebar div and innerscroll to the inner div to make it scrollable.

.fixed{position:fixed;top:0; bottom:0}
.innerscroll{overflow-y:scroll;height:100%}

Sidebar code

<div id="sidebar" class="sticky">
 <div class="cat-select"><select>
...
</select></div>
  <div class="item">
<section id="ajax-load-more">
... ajax content...
</section>      
  </div>
</div>

Can't figure out why after loading the next set of posts I can't scroll to the end such that the load-more button is visible.

Answer 1

OK, I got it. Just add two lines in your .fixed class:

.fixed {
   position: fixed;
   top: 0;
   bottom: 45px; /* added */
   min-height: 0 !important; /* added */
}

And this will work exactly as you expected. Good luck!

Answer 2

I believe it's because you have the inner-scroll div set to height:100%. I changed it to height: 90% - the button is now visible, and your content is still scrollable. I don't know why setting it to height 100% would knock out your button, though.