Before I pose my question, I need to establish two constraints:
- Must be compatible with IE 7+
- Only able to modify the CSS, cannot adjust the HTML/JS
So, I have two divs:
<div id="content"></div>
<div id="footer"></div>
"#content" represents the main content. "#footer" is a footer that solely contains a background image with no significant content.
Now, is there a way to hide a portion of the footer when the page is long enough to require scrolling, yet display it in full when the page is short?
(I've attempted methods such as:
#footer {height: 30px; margin-bottom: -20px;}
but have not achieved the desired result...)