0

before I ask the question here are my two constraints:

  • should work in IE 7+
  • I can only change the CSS, I can not change the HTML/JS

So, I've got two div's:

<div id="content"></div>
<div id="footer"></div>

"#content" is the content. "#footer" is a footer which only contains a background image and nothing that is really of value.

Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?

(So far, I have tried stuff like:

#footer {height: 30px; margin-bottom: -20px;}

but that doesn't seem to work...)

Heinz Les Spam
  • 1
  • You need sticky footer technique for this http://stackoverflow.com/questions/3906065/css-sticky-footer – sandeep Mar 22 '12 at 11:10
  • I forgot two additional things: the page is centered with "margin: 0 auto;", #content does not always extend to the bottom of the page (so it doesn't have "height: 100%"), but #footer needs to come directly/no gaps after #content – Heinz Les Spam Mar 22 '12 at 11:23

1 Answers1

0

here you have a solution only with HTML and CSS:

Source: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Example: http://www.cssstickyfooter.com/

Good Luck

Community
  • 1
  • 1
MCSI
  • 2,818
  • 26
  • 35
  • This is not what I want. The footer should not be fixed at the end of the screen. It should come gaplessly after #content, but when content is so long that the page scrolls, I want part of the footer to completely hide. – Heinz Les Spam Mar 22 '12 at 13:19