htmlcsscross-browser

HTML/CSS: scroll bar appears below HTML elements


In Chrome and Safari, the vertical scroll bar appears below HTML content on the page, like so:

scroll bar appears below header

I fiddled with ::-webkit-scrollbar, but the closest i could get was change the scroll bar width to 0px. The div of that section is:

.displayContent { min-width:620px; width:100%; height:auto; overflow:hidden; }

This occurs in Safari (but not mobile Safari on iOS) and Chrome. Firefox is fine. I also tried fiddling with overflow as well, but could not get the results i wants.

Suggestions?


Solution

  • Try this -

    html, body { 
        height:100%; 
        width:100%; 
        overflow:auto;
    }