Div with scrollbar inside div with position:fixed

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).

Edited because I just can’t stop myself, sometimes.

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();
    }
);