You can create a clear div and give it a height.
.clear { clear: both; height: 60px; }
<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>
Height being whatever you need to keep content above the footer, eg. taller than the footer. If the footer is 50px; tall, I do 60px; for the height in the clear div. So when I scroll, the footer stays in place but as I get to the bottom the content that is flowing from behind the footer has room to get pushed above the footer without being covered. Super simple, and it worked perfectly.