Here is a demonstration to illustrate my point.
<!doctype html>
<html>
<head>
<style>
* { margin:0; padding:0; overflow:hidden; }
html { height: 100%; }
body { height: 100%; }
#top { height: 100px; background-color:#777; }
#doc { height: 100%; background-color:#888; overflow:scroll; }
</style>
</head>
<body>
<div id="top"></div>
<div id="doc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis magna purus, tincidunt nec dapibus nec, faucibus eu lorem. Integer viverra ultrices diam eget interdum. Nam volutpat dolor a nisi suscipit molestie. Suspendisse molestie mauris at tellus ornare id ultricies lectus varius. Proin nisl diam, egestas in malesuada tincidunt, egestas eu libero. Suspendisse pretium elementum facilisis. Mauris volutpat scelerisque odio, non egestas velit malesuada a. Quisque dictum nibh eget ipsum pretium nec luctus est pulvinar. In hac habitasse platea dictumst. Donec eget purus sit amet diam sodales ultricies. Aliquam erat volutpat. Proin nulla libero, dictum eu fermentum et, egestas ut lacus. Nunc gravida ligula ac velit bibendum vel luctus neque eleifend. Praesent aliquet tempus felis eget commodo.</p>
</div>
</body>
</html>
The scrollbar extends beyond the bottom of the browser window by the same amount as the #top divider's height. When you resize the browser window, you need to surpass the bottom line with the height of the #top before the scrollbar appears.
It seems like the scrollbar is shifting the top of the browser rather than the top of #doc.
This issue persists in IE9, FireFox and Chrome.
Do you have any suggestions on how to resolve this?