Div with scrollbar inside div with position:fixed

Solution 1:

There's a two-step solution for this, but it comes at something of a cost:

1. Add overflow-y: scroll; to the css for #innerstatic2.
2. define a height (or max-height) for #innerstatic2, otherwise it won't overflow, it'll just keep increasing its height (the default for a div is height: auto).

I've posted a demo on jsbin to show a jQuery implementation of this, which will calculate a height for you (it's not generalised, so it'll only work with your current html).

(function($) {
  $.fn.innerstaticHeight = function() {
        var heightOfOuterfixed = $('#outerfixed').height(),
        offset = $('#innerstatic2').offset(),
        topOfInnerstatic2 = offset.top,
        potentialHeight = heightOfOuterfixed - topOfInnerstatic2;

        $('#innerstatic2').css('height',potentialHeight);
  }
})(jQuery);

$(document).ready(
    function() {
        $('#innerstatic2').innerstaticHeight();
    }
);

Solution 2:

I solved it by giving absolute position to the ul and height 100%

ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

check out this FIDDLE