html - Sticky footer hiding content

Question

I made the following sticky footer using CSS. The bottom page content is currently hidden behind the footer (see the attached screenshot). How can I adjust my CSS so that all of the body content is visible and the footer remains stuck to the bottom of the browser window? Thank you!

CSS:

.fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}

Answer 1

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.