Here is a very simple demo to show what I mean.\[code\]<!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>\[/code\]As you can see the scrollbar continues past the bottom of the browser window. It does that with the same amount as as the \[code\]#top\[/code\] divider's height. Also if you shrink the browser window, you must pass the bottom line with the \[code\]#top\[/code\] height before the scrollbar appears.It is like the scrollbar is offsetting the browser's top instead of the \[code\]#doc\[/code\] top.It is the same result in IE9, FireFox and Chrome.Any clue of how to fix this?
Scrollbar is offsetted
- Thread starter irahuman
- Start date