ansaurus

Question

Div with scrollbar inside div with position:fixed

Answer 1

A:

It is the container div who has to be with the overflow:auto attribute. In this case, the #outerfixed div

Alejandro Martin 2010-10-01 07:00:08

Sorry, I should have been more clear. I explicitly want the scrollbar to only be on the #innerstatic2 element. It is a grid and I want to scroll only the grid, not the whole container.

Einar Egilsson 2010-10-01 07:06:08

Answer 2

+3 A:

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

Add overflow-y: scroll; to the css for #innerstatic2.
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();
    }
);

David Thomas 2010-10-01 07:01:14

Thank you for the answer. Actually this is pretty much what we have today, calculate the right height for #innerstatic2 and set with jquery. But this is causing problems with a third party component that calculates some sizes incorrectly when we mess with this in document ready, so that's why I really wanted a pure CSS solution.

Einar Egilsson 2010-10-01 07:51:10

So, is there no way to force scroll on #innerstatic2 by setting the height on #outerfixed? From what I've tried it seems not, #innerstatic2 just flows outside if I set an explicit height on #outerfixed, but is that because it is position:fixed?

Einar Egilsson 2010-10-01 07:52:28

It could be. You can also add `overflow: hidden` to the css for `#outerfixed`, but that doesn't *look* particularly pretty, unfortunately.

David Thomas 2010-10-01 07:55:45

Answer 3

+1 A:

The only way I figure, is to set innerstatic2 to absolute position (so you can use top and bottom to size it in relation to outerfixed), then inside innerstatic2 create another div where you put your text in. Then you give innerstatic2 the "overflow: auto;" indication. The drawback of this method, that innerstatic2 does not move down, when innerstatic1 grows, since it has to be position absolutely. If it needs to move, it must be "position: relative", but then you need to set a fixed height for it. So either way you have to settle for a compromise.

Once all browsers support the newer CSS3 features, like the calculation support, there will be better options to do this, without these drawbacks.

Eric J. Francois 2010-10-01 15:41:14

ansaurus

tags:

views:

answers:

Div with scrollbar inside div with position:fixed

related questions