System System - 7 months ago 39
CSS Question

Extra space when scrolling using fixed height

I have a wrapper with elements inside that obviously I want to scroll when there are more elements than the box can hold. However when I scroll below the last word it has a large amount of excess space. I believe this may be caused by the fixed height. I have tried using max and min height but doesn't seem to fix it Preview


JSFiddle was choking on your code because you were double terminating your icons. I removed the double </i> and the code resolved fine on JSFiddle:

With that said, the reason for your issue was pretty easily identified, you have 400px of padding on the bottom of div.communitieswrapper. Replace the CSS class you provided with the following:

  border: 2px solid #eeeeee;
  border-radius: 7px;
  z-index: 1;
  position: relative;
  height: 450px;
  overflow-y: scroll;
  overflow-x: hidden;

Fiddle with example: