The Jumping Page on desktop/laptop

3 - Rescued by overflow-y

3.A - Short page

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

What's happening:

In this case the right scrollbar is visible, but empty for a short page.

This solution is invalid css2.1 (amid some other 'errors') but valid css3, so not alarming.

The scrollbar difference is rather pronounced when changing between a short/long page. - Therefore I prefer the padding-bottom method.

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 {
  overflow-y: scroll;
  /* nothing
  relevant */
  }
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 | invalid css2.1 | valid css3

original: 20 oct.2013

update: 12 dec.2018