CSS: Forcing vertical scrollbar

I’ve had issues when designing websites with the website appearing to shift this is a common issue and caused due to the vertical scroll bar (used to move up and down a page) automatically appearing if the page content requires scrolling and disappears when it is not needed.

This is not an issue on all browsers as some always show the vertical scroll bar so those users will not see this issue. I have used 3 methods to force the vertical scroll bar the first isn’t valid CSS but it seems to work on all browsers apart from opera I would recommended using the second or third.

Method 1

html{
    overflow-y: scroll;
}

Method 2

html{ 
    min-height: 100%; 
    padding-bottom: 1px; 
}

Method 3

html{
    heigth: 100%; 
    margin-bottom: 1px;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.