Scroll error in google chrome
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 pane gets its scrollbars. But scrollbars appear on top of the inner div (blocking its content). Works fine in firefox and IE.
I need the inner div to be positioned absolutely.
Someone will help please.
a source to share
The scrollbar is added within div
, not below it, so the content on your page will not slide down or sideways if div
showing scrollbars. So if you set the outer height div
to 100px, it will be 100px with or without scrollbars.
I don't have IE to test, but I don't see any height difference in Chrome, Safari, or Firefox. However, there is one difference. Chrome and Safari don't resize the outer div
. It's still 100px high, but the scrollbar overlaps at the bottom. In Firefox, however, the outer div
gets a size of up to 100 pixels - the height of the scrollbar. So div
now let's say 90px and a 10px scrollbar is added below that.
Not much can be done about this; just the way browsers choose to render things like this. If you want to show more content, add padding or change the height.
a source to share