Stop your page from shifting!
Posted on 10 January 2007 (02:36 PM)
You know content, right? When it gets really really long, your friendly browser provides you with a scrollbar so you can access that content.
But sometimes, your content is not really really long. Your browser then does not display a scrollbar, for it's superfluous. It's a great system, really, but it does make your content shift from left to right and back when you browse different pages.
Read on if you want to stop this from happening.
It's dead simple really. Just throw in the following CSS:
html { height: 100%; }body { height: 100.1%; }- Download this code: /code/stop_your_page_from_shifting1.txt
That's it!
I know there are more challenging obstacles in web development, but this is something designers have asked me to do a couple times lately, so I thought I'd share.
Filed under HTML and CSS
- ← previous article: Fighting spam using MySQL and PHP
- → next article: New Dutch accessibility law
Comments:
is this tested on all browsers? which ones?
this comment has been quoted by Harmen Janssen
I have tested this method in
- Safari
- Firefox
- Netscape
- Opera
- IE versions 5.01 to 7
All browsers behave like they should, the only thing the different user agents don't agree on is how much 100.1% exactly is :)
For instance: in Internet Explorer 7 there is much more scrolling than in Firefox.
I just always tell my clients; yeah i'm sorry that's just bc of the scrollbar.
For IE & FF you can use overflow-y: scroll; Too bad Safari and Opera doesn't support this property.