A short page has no scrollbar on the right side as a long page has.
What's happening:
Under Windows-7/10, in Firefox, Chrome, Opera, Safari, IE-11 and Edge there is no space reserved for the scrollbar (as in Internet
Explorer 7 and IE's before).
If you have a horizontally centered page, this is causing a left/right jumping of the page in case of changing between a short and a long page.
Attention: your available screen height is less than the height of this page - there is always a scrollbar and no jumping!
Please enlarge your window height to see the effect!
html {
/*
nothing relevant
*/
}
body {
width: 98%;
max-width: 900px;
margin: 21px auto 0 auto;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
au gue duis dolore te feugat nulla facilisi.
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
Praesent placerat bibendum dui at aliquet. Morbi sapien justo, consequat et elementum et,
molestie a odio.
Nulla hendrerit libero quis leo porta sodales. Proin mattis turpis ut quam porttitor fringilla.
Donec placerat, arcu et venenatis ultrices, sem purus feugiat nisl, et mollis mi sapien id
lacus. Ut metus massa, fermentum a dapibus a, ornare id urna. Vivamus augue mauris, pretium vel
lacinia a, euismod a arcu. Nullam egestas porta adipiscing. Nunc eget placerat massa. Sed et
turpis tellus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
curae; phasellus sed nulla augue. Suspendisse in felis dolor. Etiam tristique scelerisque bibendum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
au gue duis dolore te feugat nulla facilisi.
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
Praesent placerat bibendum dui at aliquet. Morbi sapien justo, consequat et elementum et,
molestie a odio.
Nulla hendrerit libero quis leo porta sodales. Proin mattis turpis ut quam porttitor fringilla.
Donec placerat, arcu et venenatis ultrices, sem purus feugiat nisl, et mollis mi sapien id
lacus. Ut metus massa, fermentum a dapibus a, ornare id urna. Vivamus augue mauris, pretium vel
lacinia a, euismod a arcu. Nullam egestas porta adipiscing. Nunc eget placerat massa. Sed et
turpis tellus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
curae; phasellus sed nulla augue. Suspendisse in felis dolor. Etiam tristique scelerisque bibendum.
Francky Kleyneman
original: 20 oct.2013
update: 12 jan.2019 (added: results Edge)