I am facing an issue with my website that needs to be completely contained within the browser window without requiring users to scroll up and down to view different parts of the site. I am currently utilizing overflow:auto to handle long content that doesn't fit in the content pane, which is working well.
However, the problem persists despite my efforts:
I am encountering two sets of scrollbars as shown here: http://www.wikiforall.net/bad_scrollbars.png
Beneath the content that fills the browser window properly, there seems to be a gap that triggers the appearance of the vertical scrollbar (and a similar gap on the right side that is less noticeable). Upon inspecting the elements using Chrome's element inspector, I noticed that the <html> tag only covers up to that mysterious gap. It has left me puzzled about where this gap is originating from.
The main page divs are configured with position: absolute, with properties for left, right, top, and bottom all set to zero. These divs also have display: inline applied, with no margins or padding included. The styling for the html and body tags mirror that of the main page divs.
Despite days of searching, I haven't been able to find a solution that works. Is there anyone who can provide guidance on how to eliminate these unwanted scrollbars?