my code stock.com

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

<div id="footer">
  Sticky Footer
</div>
Also make sure that your header and content areas are properly defined as ID's.
CSS
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 stock.com 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");
                   
                positionFooter();
               
                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("-----------")
                    console.log("Header height: ", header1);
                    console.log("Content height: ", content1);
                    console.log("-----------")*/
                    
                    if ( (header1+content1+footerHeight) < $(window).height()) {
                       $footer.css({
                            position: "absolute"
                       }).stop().animate({
                            top: footerTop
                       })
                    } else {
                       $footer.css({
                            position: "static"
                       })
                    }      
                }
                $(window)
                    .scroll(positionFooter)
                    .resize(positionFooter)   
            });

Create a free my code stock.com account now.

my code stok.com 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.