in html/css |

Forcing the right scrollbar to appear on your web page

One common problem when using a centered layout is that when a page is short, the browser does not display a scrollbar, and when your page is taller than a screen, the browser adds a scrollbar. That’s all nice except that your painfully designed content jumps around to accomodate the scrollbar. The solution I have used is to force the scrollbar to appear all the time.

By no mean am I taking credit for this trick. I’ve modified Richard White’s template to incorporate it.

Just include this in your CSS, and voila!

/* force right scrollbar */
html {
    height: 100%;
    margin-bottom: 1px;
}

this will force a vertical scrollbar to appear on the right side.

Update, November 2010. Comment from Brent:

In many cases it is the width of the objects in the body that causes the visual hopping of floated objects. I have found that use of the rule width:auto takes care of many of these issues. Although 4 years old this topic is still high on a Google search and your readers may be interested in this tactic as another means of resolving their issues.

I think this addresses a different issue since the scrollbar appearing will change the width. Having the scrollbar present all the time ensures the width stays contant.

Published

24 Comments

  1. I just tried your little scrollbar hint, and it worked… BUT it looks stupid. At least to me. I’m as tormented as the next guy about layout “hopping” but having an ever present scroll bar on the right on “short” pages that only scrolls a single pixel seems wrong to me… The cure is worse than the disease.

  2. Jeremy,

    Thank you for the honest feedback. I’m truly sorry you don’t like the result. This is the best technique I’ve found so far and if you know of a better, one please do let us know and I’ll update the page.

    FWIW, the other techniques I’ve seen used are adding an arbitrary <div> or 1000px or equivalent. I’ve also seen techniques where you can force the scrollbar with some javascript, but I think I had trouble with cross browser compatibility. And the simplest of all is to always put enough content on the page to guarantee that the page needs to scroll ;)

    In the end it is a matter of what looks right to you.

    That said, once the page has a reasonable amount of content (say at least 25% of the page), and you are not totally focused on the scrollbar, at least to me, it really disappears and you are not startled by the layout hopping.

  3. Wouldn’t this work just as easily?
    body {
    overflow-y : scroll;
    }

    Works if you apply it to html, also. Basically body tag or it’s parent.

    -Lu (digitalbonsai [dot] com)

  10. I’ve never a javascript solution yet. I would imagine that you could set the height the element like you do in the CSS case. I’ll have to investigate this, unless someone else has a solution?

  11. thanks for the script. this webpage centering problem was driving me insano! Now everything centers perfectly. The web pages look great even with nonfunctioning scroll bars.

    I’m Happy

  12. how’s about simply using both and then incorporating a set of simple browser checks. By finding the browser you can easily utilize the Mozilla overflow-y facility, while leveraging the height 100% and margin-bottom: 1px for IE. Here is what works great for me: (placed in header)
    <!– style sheet calls –>

    <!– for mozilla only –>

    <!--[if IE 5]>
  
<![endif]-->
<!--[if IE 5.5]>
  
<![endif]-->
<!--[if IE 6]>
  
<![endif]-->
<!-
->

  14. Guys, allow me to ask a question:
    My vertical scrollbar (iframe) appears on the left handside.
    How do I force it to appear on the right handside?
    Thanks

  16. @Mulli: hmm, never seen this! If you figure this out, I’d love to know what was causing this…

  17. html { overflow-y : scroll; }
    seems to work flawlessly across all browsers

  19. thank you very much for your advice. As you likely know this is a very important thing to me!I have checked out a number of sites regarding scrollbars and your advice sounds the most loving.
    Thanks again for taking the time to listen. May God bless you and your work.

  22. Hello –

    Thanks for posting this; I have the same concern. Could you provide the exact syntax for the command: “overflow-y : scroll; ” when using straight HTML? Where does this need to go? Anywhere between the body tags? Is that all there is to it?

    Regards, David

  23. Or, as per above, how to make your original solution work in straight html:

    height: 100%; margin-bottom: 1px;

    Again, thanks

Comments are closed.

  • Related Content by Tag