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!
html {
overflow-y: scroll;
/* 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.
valid html5 | invalid css2.1 | valid css3
original: 20 oct.2013
update: 12 dec.2018