100% height in Safari 3.2.1

I’m quite sure this is a common issue, so I won’t bother posting my XHTML and CSS just at the moment…(unless someone asks!). The issue arises with 100% height container divs in Safari 3.2.1.

I have a three-column layout (actually; five – but two are tiny and just hold drop shadows for the main content div), all in valid XHTML and CSS. I have set the height of the body and of the container divs to 100%, but unfortunately it seems to be 100% of the viewport/window, rather than 100% of the entire document. This means that if scrollbars appear, when you scroll down the background does not render for the part of the document that was previously hidden.

Is there a way to fix this? I’ve seen posts about using tables, but I’m trying my best to avoid that.

I’m quite sure this is a common issue, so I won’t bother posting my XHTML and CSS just at the moment…(unless someone asks!). The issue arises with 100% height container divs in Safari 3.2.1.

I have a three-column layout (actually; five – but two are tiny and just hold drop shadows for the main content div), all in valid XHTML and CSS. I have set the height of the body and of the container divs to 100%, but unfortunately it seems to be 100% of the viewport/window, rather than 100% of the entire document. This means that if scrollbars appear, when you scroll down the background does not render for the part of the document that was previously hidden.

Is there a way to fix this? I’ve seen posts about using tables, but I’m trying my best to avoid that.

Any help greatly appreciated.

Regards, Mark

use background-position:fixed; for the image you want to stay stabalised

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.