Category : Javascript | Author : Chtiwi Malek | First posted : 4/4/2012 | Updated : 2/17/2013
Tags : footer, css, javascript, ajax, bottom, html, website, position, layout, jquery, updatepanel, cross browser
The best Sticky Footer

The best Sticky Footer

This document describes how to make a footer that sticks to the bottom of the page even if the page content is less than the browser window height, so you don’t have a footer appearing in the middle of the browser window. This solution is cross browser and you dont need a fixed height for the footer.

I’ve tried and come across many Sticky Footer on the web, but all have issues:

Pure CSS Sticky Footer: will not render correctly on all browsers, and you will have to add fixes or extra HTML markup for some browsers or old ones.
Pure JavaScript Sticky Footer that relies on an empty push div has rendering issues when resizing the window quickly.

So I decided to write my own code :
function positionFooter() { var mFoo = $("#myfooter"); if ((($(document.body).height() + mFoo.outerHeight()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) { mFoo.css({ position: "fixed", bottom: "0px" }); } else { mFoo.css({ position: "static" }); } } $(document).ready(function () { positionFooter(); $(window).scroll(positionFooter); $(window).resize(positionFooter); $(window).load(positionFooter); });
This code needs jQuery and will position the element footer with id “myfooter” at the bottom if the page length is shorter than the browser window length and will place it in the normal flow if the page is longer or equal to the browser window length.

.NET Ajax UpdatePanel & the Sticky Footer

If you're a .NET developer and using the ScriptManager and Ajax UpdatePanels you'll need a call to the javascript fonction positionFooter() after an ajax partial postback, because the page length will change when the updatepanel updates it’s content. So just add this code to the page or master page where your Update panel is defined, Just change "up1" with your UpdatePanel ID :
if (IsPostBack)
{
  ScriptManager.RegisterStartupScript(up1, up1.GetType(), "ppf", "positionFooter();", true);
}
Have fun and don't hesitate to ask me any questions or send me your thoughts.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Jquery Sticky Footer
Thank you so much! I have been struggling for hours with various css versions and your jquery version worked 100% first time!!!
- by Munro on 4/20/2012
Jquery Sticky Footer
Thanks for the code! it works perfect for me in a responsive website :D
- by Jorge on 4/20/2012
thanks
it works!
thanks for sharing
- by Nurul Amin Russel on 5/3/2012
You are awesome thank you!
I've been struggling with this for a long time and this one worked for me. Thanks
- by Ubaid Seth on 5/11/2012
Example?
Could you post an example code/page of this working? I believe it works, but I'm not exactly sure how I'm supposed to enter all of this in there.
- by Kpppp on 5/31/2012
I would also like an example :)
Is it hard to implement this into my HTML? I've never used jquery before so I would really appreciate it if someone would show me how it's done.
- by Johan on 6/2/2012
Thank you!
I've tried all the other versions and your worked perfectly! Excellent method!
- by Cristian on 6/24/2012
Excellent Example
Wowwwwww... this is really great. and very simple example. worked really awesome to me.

thanks a lot for this tut i have been struggling a lot for this simple code since long time.
- by Mahendra on 6/26/2012
Padding in footer
If you are using padding in your footer, you can better change: mFoo.height() to mFoo.outerHeight()
- by Ben on 8/27/2012
Few issues
I have tried to make this work with various layouts but FIXED position seems to cause problems with the footer width, and even if a fixed width is set for the footer it causes problems with centering if the screen size is small than the fixed width. I would like to see a working demo that addresses these issues.
- by John on 9/13/2012
Thank you!
This is the best footer ever! I have tried so many different solutions and none of them were ever really satisfactory. This is exactly what I needed, and so easy to implement. Thank you so much!
- by Rachael on 11/1/2012
Awesome!
Thank you very much
- by Fluc on 11/29/2012
Changed something to be perfect, Thanks.
Hello, this is the best script I could find.
It works in IE 7, 8, 9, 10, and al other modern browsers and also on the iPad and iPhone with iOS 6.0.1.
I only changed all "fixed" values to "absolute" because when the footer isn't higher than the viewport height and you make the browser window very small in width it isn't possible to scroll to the right to see al the content of the footer.

Thanks Malek.
- by Jeroen on 11/29/2012
Saved my ass
This problem was killing me until your glorious code saved my ass. One day I hope to be as rad as you. Honest.
- by Onetriphudson on 11/30/2012
Seriously! Great coding!
I have been looking for a long time for a solid jquery stickyfooter.. You nailed it!
- by Christoph on 2/1/2013
fixed and widht
Great script!
Same problem as John. Width problem when position:fixed.
I've added width:auto whit position:static and width:100% whit position:fixed.

For me work on bootstrap template.

I have to change $ whit JQuery.

bye Marco.
- by marco on 3/14/2013
I love you
YES I DO !

- by kadir on 7/28/2013
I love you
YES I DO !
- by kadir on 7/28/2013
Thank You!!
No matter what new script I've tested, time and again, this is by far the most reliable script I've ever found. Thank you!
- by Julie on 8/26/2013
Thank you very much!
I tried around 5 other solutions before finding this one. It took me about 5 hours to get a sticky footer to work on my responsive site, wish I would have seen this sooner. Great solution!
- by Paul on 9/8/2013
The best solution I could find
Thanks Malek for a really easy to implement solution! If you're already using jQuery this seems the best solution out there to realiably work on everything.
- by Matt on 11/20/2013
could you please share an example of this code.
Is it hard to implement this into my HTML? I've never used jquery before so I would really appreciate it if someone would show me how it's done or share a example; which to use this code.

Thanks.
- by Lokesh on 11/22/2014
can somebody tell me how to use it
can somebody tell me how to use it
- by Hans on 12/2/2014
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
 
» Latest
» Random/Popular
© Codicode | Content and source © 2013