Search code examples
htmlcsssticky-footer

Implement a sticky footer that is outside main wrapper?

Here is a fresh variation on an old question.

I'm working on a page where the footer needs to be outside the main wrapper.

<body>
    <div id="page-wrap"></div>
    <footer id="footer"></footer>
</body>

I've been looking for a nice cross browser solution for implementing a footer which sticks to the bottom of the content in the page-wrap or the bottom of the page when the content in the page-wrap doesn't quite fill the page. I searched stackoverflow & a few other places. I have yet to see a solution which covers all the important browsers & allows for the footer to be outside the page-wrap.

Anyone know how I can pull this off?

Solution

  • CSS Sticky Footer will do it.

    http://www.cssstickyfooter.com/html-code.html