3

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!

Theraot
  • 31,890
  • 5
  • 57
  • 86
Jedediah Shumaker
  • 509
  • 1
  • 5
  • 7

2 Answers2

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Fixed! Thank you so much, I have had this problem everywhere! – Jedediah Shumaker Jun 20 '11 at 18:43
  • Should I use padding instead of margin or top/left? I am being forced to used a template and some builder utility and the only thing I can do is ADD my own CSS. I can't edit the pre-existing CSS or HTML. – Jedediah Shumaker Jun 21 '11 at 13:56
  • Well in that case, maybe it's not such a bad solution after all. I can imagine not being able to change around the HTML or edit the existing CSS would be very crippling. What you have works fine, it's just a little inelegant. – thirtydot Jun 21 '11 at 14:16
0

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.

Adarsh_V_Desai
  • 195
  • 1
  • 8