Currently seeking new career opportunities in web development, particularly with Laravel, Hire Me

Avoiding pageshift by forcing a scrollbar with CSS

David Carr

CSS Tutorials HTML

I've had a few people ask me about the same problem recently its a simple problem with a simple solution.

Ever noticed your page shift when using a central container when moving from page to page? chances are you have and the reason for this in most cases is due to some pages not having enough content for the browser to create a scrollbar and other pages having enough content so when moving pages the central container will adjust itself to be in the center of the available space, this can cause a slight shift on position.

The solution is to either have enough content to make a scrollerbar not an ideal solution its much easier to add a tiny bit of CSS to your stylesheets to force a scrollbar then you never need worry about the page shifting vertically.

html>body { overflow:scroll; }

That will force the browser to ensure there is always a scrollbar visible.

Laravel Modules Your Logo Your Logo Your Logo

Become a sponsor

Help support the blog so that I can continue creating new content!


My Latest Book

Modular Laravel Book - Laravel: The Modular way

Learn how to build modular applications with Laravel Find out more

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Learn Laravel with Laracasts

Faster Laravel Hosting

© 2006 - 2024 DC Blog. All code MIT license. All rights reserved.