0

My content and body background colors are different and I would like to have a gradient to fade from one to the other. This effect is only necessary when the content is smaller than the viewport.

Example: http://jsfiddle.net/kEXzs/1/

Shrink the result view on the y axis and notice how the scroll bar shows up because the .footer div is overflowing. I don't want that to happen. The viewport should only show the scrollbar when the content is overflowing. Is this possible?

I'm also open to other suggestions that would provide the same effect. The content div is resized dynamically so setting a gradient background for body doesn't work.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
Jeff Camera
  • 5,324
  • 5
  • 44
  • 59

1 Answers1

0

You could position the footer as being fixed:

<div class="footer" style="position: fixed">
</div>

(or change the CSS accordingly).

Here's a fiddle for this: http://jsfiddle.net/kEXzs/17/

Dave Watts
  • 890
  • 7
  • 11
  • 1
    That's just what I was looking for. Thanks! Might want to update your answer to specify "fixed" position as you have it in your JSfiddle. – Jeff Camera Jan 28 '12 at 19:28