Question

I have the following html structure

<div style="overflow-x:auto;overflow-y:hidden;position:relative">
      <div style="position:absolute; top:0;bottom:0;padding-top:30px">
      </div>
</div>

When the inner div expands the outer bar gets its scroll bars. But the scroll bars appear on top of the inner div (blocking its contents). Works fine in firefox and IE.

I need the inner div to be positioned absolutely.

Someone help please..

Answer 1

The scrollbar is added within the div, not below it, so the content on your page won’t be pushed down or sideways whenever a div shows scrollbars. So if you set the height of the outer div to 100px, it’ll be 100px with or without the scrollbars.

I don’t have IE here to test, but I don’t see a difference in height in Chrome, Safari or Firefox. There is one difference though. Chrome and Safari don’t resize the outer div. It’s still 100px in height, but on the bottom the scrollbar is overlaid. In Firefox however, the outer div gets resized to 100px – the height of the scrollbar. So the div is now, say, 90px, and the 10px scrollbar is added below that.

There isn’t much you can do about this; just the way the browsers decided to display things like this. If you want to show more content, add some padding or change the height(s).