The Jumping Page on desktop/laptop

2 - Rescued by 1 px padding

2.A - Short page

Now the right scrollbar is forced for a short page > no jumping.

What's happening:

The <html> has the full height of the screen, and 1px extra padding in the bottom.

For safety I've added the box‑sizing: content‑box (height = exclusive padding, instead of inclusive), then a  * {box‑sizing:  border‑box} somewhere else in a stylesheet is harmless.

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!

grow great, page, grow great!

html {
  height: 100%;
  padding-bottom: 1px;
  box-sizing: content-box !important;
  }
body {
  width: 98%;
  max-width: 900px;
  margin: 21px auto 0 auto;
  }

Filling the page

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.

Even more filling stuff

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.

valid html5 | valid css3

original: 20 oct.2013

update: 12 dec.2018