If you’ve ever developed a site which is centrally aligned and only requires a vertical scrollbar on some pages then you’ll have experienced the problem in Firefox where the page appears to jump to allow for the appearance and disappearance between pages.
However, there is a fix which can force the scrollbar to appear all the time which prevents the jumping of the page and it’s really simple to implement.
By applying the following code to your CSS, you’ll force a scrollbar to appear which can scroll approximately 7 or 8 pixels by default but will also allow for the content to scroll should it exceed the bottom of the window.
html {
min-height: 101%;
}
Why 101%
I initially use 100.1% as this certainly works in Firefox and only applies a 1px scrollbar by default which is much nicer. However, after testing this on all browsers, it appears as though Opera doesn’t support the decimal place and therefore this has to be rounded up to 100.1% to force the scrollbar in Opera.
It all depends which is more important to you as a developer and the client though. Maybe a 1px scroll would be better and to leave the page jumping slightly in Opera or maybe complete consistency across browsers is more important in which case, the 7 or 8px scroll in Firefox can be ignored.
Either way, applying a min-height on the html element that’s greater than 100% will force a scrollbar and fix this annoying behaviour.
Note: Internet Explorer displays a scrollbar by default and is therefore not affected by this Firefox fix.
Edwin Siebel
2 years ago
Why not use:
html {
overflow: -moz-scrollbars-vertical; /* Always show scrollbar */
}
So much easier.
Edwin
Dave
2 years ago
Hi Edwin, thanks for the suggestion however that won’t solve the problem for Opera and is actually invalid CSS code.
However, it did give me another idea as the valid CSS for this is overflow-y which works for Firefox and in other browsers which is a great solution and much nicer than the 101% height fix I’ve been using
html {
overflow-y: scroll;
}
Peter Johnson
2 years ago
-moz- styles are not actually invalid. Refer to section 2.3 of the following W3C document:
http://www.w3.org/TR/2007/WD-css-beijing-20071019/
Unique Numbers in CSS | Play Work Play Studio
2 years ago
[...] Like the number before it, 101% is also used on the height property. This is commonly used to deal with Firefox’s behavior of adding/hiding its vertical scrollbar depending on whether the page is taller than the viewport or not. This behavior gives the effect of inconsistencies between pages depending on their height. Using this technique, Firefox is forced to always display the scroll regardless of page height. [...]
Peter
1 year ago
Tried both 101% and overflow-y: scroll; both work fine.
I’ll leave it with second option on site.
Nice fix thanks again.
J
1 year ago
Searched for “force scroll html” and found this. Thanks!
Aaron
1 year ago
Thanks for this post! The only difference I notice between the two approaches, min-height and overflow-y is that min-height onload will create a scrollbar 100% in length of its scrolling channel then reduce to its true size, and the overflow-y does not. I’m viewing this in firefox. None of this really matters, both fixes work, I’m prefering overflow-y for the non-resizing scrollbar.
Fenix
1 year ago
Both methods worked for me but
html {
overflow-y: scroll;
}
does not validate in CSS level 2.1 so I went for the first option , which validates no problem.
Thanks for the help!
Reegan
1 year ago
Hi Dave thanks for the help it works. but it show doubel scroll in IE6 & IE7 wat to do pls help me
Nitecore
1 year ago
I keep hoping that Firefox will address this issue in the next version, but it never seems to happen.
Firefox is great to use, but a pain to design for.
Joseph
1 year ago
The solution:
html {
overflow-y: scroll;
}
validates in CSS level 3, just not CSS level 2.1.
It works for Google Chrome as well, which handles scrollbars the same way Firfox does.
Acsa
1 year ago
It was very useful. Thanks everybody.
Marcin
1 year ago
THANKS GUYS!!!
I was loking 3hours for this solution, almost lose hope…
Thanks once again
Zeljko
1 year ago
Hi all!
The suggested
html {
overflow-y: scroll;
}
works only in Firefox, not in Opera!
The first mentioned
html {
min-height: 101%;
}
makes too big space on the bottom of Firefox!
So the best way to force scroll in both Opera and Firefox in the same way is
html {
height:100%;
margin-bottom: 1px;
}
Cheers
ARI
11 months ago
Thanks for the tip!
Margin error in Firefox?
4 months ago
[...] After googling around some, I found the solution