overflow: auto in IE7 leaves room for the scrollba

问题:

Because a customer requested it, I've changed a div to

position: absolute;
top: 5px;
bottom: 5px;
overflow: auto;
min-width: 945px;

which basically works fine in all supported browsers (IE7, IE8, Firefox 3+): It makes the div fill out the available area vertically, and show a vertical scrollbar if it doesn't fit. Note that without the min-width of 945px, the scrollbar would overlay a part of the content, since the content is not resized properly when the scrollbar is added in all Internet Explorer versions. With the min-width, it happens to fit, and other browsers don't care.

However, on IE7, if a vertical scrollbar is displayed and then the browser window is extended vertically so that the scrollbar is no longer needed, IE7 removes the scrollbar, but leaves a blank rectangle where the scrollbar was, i.e. the div content is not extended to the former scrollbar area. When reloading the page in the same window, it's fine. IE8 does not show this problem in standards mode.

How can I solve this?

回答1:

it sounds to me like there is a bug in ie7 or your ie7 specifically. as for your code, its fine, although a little odd, do you want the div to horizontally scroll?

回答2:

This is still an observed issue in IE7 and below (and of course, IE8 Compatibility View and the related modes).

After doing research, I think it's an oversight. In IE7 and below, overflow:auto always showed scrollbars, disabling them if they're not needed (for elements that "usually" have scrollbars). It appears that this behavior lead overflow:auto elements to not recalculate their width after scrollbars disappear (as they were never intended to disappear).