Quick CSS Tip

This came up when I was working on the X Communciations website. Some browsers, such as Safari and Firefox, only display the scrollbar when needed. This results in a “jump” half the width of the scroll bar if you have a centred website, and you go from a page with no scrolling to a page with scrolling. This can look icky. To get around it, just add:

body, html { height:100%; margin-bottom:1px; }

to your CSS. It makes your page 1px higher than the height of the screen, forcing a scrollbar onto every page. I found this tip on Jon Hicks’ website.

This entry was posted on Thursday, April 5th, 2007 at 12:23 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

2 Responses to “Quick CSS Tip”

  1. Eoghan McCabe Says:
    April 5th, 2007 at 5:19 pm

    Ah… Very good.

  2. Pasquale Says:
    April 8th, 2007 at 7:26 am

    Thanks! that’s a great tip.

Leave a Reply