Dave Woods - HTML, CSS, Web Design
Personal Website of a Web Designer
Subscribe in a reader
Firefox scrollbar fix
Published by Dave | Filed under Web Standards, CSS, Hints and Tips
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.
October 21st, 2007 at 6:44 pm
Why not use:
html {
overflow: -moz-scrollbars-vertical; /* Always show scrollbar */
}
So much easier.
Edwin
October 22nd, 2007 at 8:40 am
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;
}
October 29th, 2007 at 1:22 pm
-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/
January 13th, 2008 at 2:18 am
[…] 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. […]
April 11th, 2008 at 11:30 am
Tried both 101% and overflow-y: scroll; both work fine.
I’ll leave it with second option on site.
Nice fix thanks again.
May 2nd, 2008 at 9:23 am
Searched for “force scroll html” and found this. Thanks!
May 2nd, 2008 at 5:09 pm
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.
May 19th, 2008 at 9:15 pm
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!
July 8th, 2008 at 2:26 pm
Hi Dave thanks for the help it works. but it show doubel scroll in IE6 & IE7 wat to do pls help me
August 21st, 2008 at 4:29 pm
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.