CSS3 gradient background with unwanted white space at bottom

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!

---

• 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.

---

I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)

 body {
    background-image: linear-gradient(
        to right bottom, 
        var(--clr-primary-100) 0%,  // Random colors
        var(--clr-primary-900) 100%
    ); // Linear gradient
    background-size: cover;      // Add these properties to your body tag
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

I hope this helps. Let me know if you face any problems.