Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Problems with scrollbar in IE9, position: fixed, overflow: auto

I've encountered a strange issue with the vertical scroll bar on IE9 when using a div with a fixed position and overflow: auto set on the div.

See the case here using IE9 and shrink the window height down to a small size.

http://bytiger.com/add/ie9_div_test.html

I can confirm that this doesn't occur on IE8.

Does anyone know a reasonable hack around this? I've tried setting the width to the window width, but it seems that it purposesfully subtracts a scrollbar width from the size of the div. I would like to see if there is a solution that doesn't have to calculate this constant or hardcode it and adding this back to the calculated width.

Cheers!

EDIT: Jsfiddle doesn't seem to exhibit the problem... so that can be a big hint as to what might be going on.

http://jsfiddle.net/dvAKW/

like image 370
ricosrealm Avatar asked Jun 27 '12 04:06

ricosrealm


People also ask

How to prevent overflow scroll?

To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border. Alternatively, use overflow: visible to show content that extends beyond the borders of the container.

How do I fix the scrollbar in CSS?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

How do I show scroll only when overflow?

Add CSS. Set the overflow property to “auto”. This value adds scrollbar when the content overflows.


1 Answers

Seems like IE9 doesn't handle the box-sizing property correctly - changing it from "border-box" to "content-box" or leaving it blank will fix your problem.

like image 199
hazard Avatar answered Nov 15 '22 21:11

hazard