CSS3 gradient background with unwanted white space

Question

I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.

Such as here: http://womancareolympia.webs.com/

I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.

Thanks for the help!

Answer 1

• Add min-height: 100% to body.
• Remove all instances of padding-top from body (or otherwise set it to 0).
• Set top: 129px on #fw-container.
• Set margin-bottom: 110px on #fw-container.
• Add overflow: hidden to #fw-foottext.

(tested in Chrome+Firefox only)

I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.