my code

jQuery code designed to keep the footer at the bottom of the page.
Just make sure the #footer is the last visible thing on your page.

<div id="footer">
  Sticky Footer
Also make sure that your header and content areas are properly defined as ID's.
Giving it a set height is the most fool-proof.

#footer { height: 100px; width: 100%; }

Snippet options

Download: Download snippet as sticky-footer.js.
Copy snippet: For this you need a free my code account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

$(window).bind("load", function() { 
               var footerHeight = 0,
                   footerTop = 0,
                   $footer = $("#footer");
                   $header = $("#header");
                   $content = $("#content");
                function positionFooter() {
                    footerHeight = $footer.height();
                    footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
                    header1 = $header.height();
                    content1 = $content.height();
                    // DEBUGGING STUFF
                    /*console.log("Document height: ", $(document.body).height());
                    console.log("Window height: ", $(window).height());
                    console.log("Window scroll: ", $(window).scrollTop());
                    console.log("Footer height: ", footerHeight);
                    console.log("Footer top: ", footerTop);
                    console.log("Header height: ", header1);
                    console.log("Content height: ", content1);
                    if ( (header1+content1+footerHeight) < $(window).height()) {
                            position: "absolute"
                            top: footerTop
                    } else {
                            position: "static"

Create a free my code account now.

my code is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.