Dave Woods - Freelance Web Design Warwickshire

Firefox scrollbar fix

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.


18 comments on “Firefox scrollbar fix”

  2. Dave Post author

    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;
    }

  4. Pingback: Unique Numbers in CSS | Play Work Play Studio

  5. Peter

    Tried both 101% and overflow-y: scroll; both work fine.

    I’ll leave it with second option on site.

    Nice fix thanks again.

  7. Aaron

    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.

  8. Fenix

    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!

  10. Nitecore

    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.

  11. Joseph

    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.

  14. Zeljko

    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

  16. Pingback: Margin error in Firefox?