Comments on: Tips and Tricks – Pure CSS Sticky Footers

By: Angel Luv

Angel Luv — Mon, 08 Apr 2013 15:44:59 +0000

Nice tricks to stick with for pure CSS sticky footers. Thanks for sharing this with us!

Angel

By: How To Design a Basic Webpage Template with a Header, and a Footer | Web Design And Development Tips

Thu, 04 Apr 2013 21:28:40 +0000

[...] ryanfait.com/stickyfooter/, http://ryanfait.com/resources/footer-stick-to-bottom-of-page/, http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/, and http://css-tricks.com/snippets/css/sticky-footer/. Many thanks to their authors! For a live [...]

By: TJ

TJ — Thu, 04 Apr 2013 07:52:45 +0000

dosen’t work in IE10 standard mode..

By: Code Hater

Code Hater — Wed, 27 Mar 2013 13:30:25 +0000

Good Call Rockit! Much better!

By: Rockit

Rockit — Mon, 11 Mar 2013 21:29:48 +0000

Here’s a good example:
http://mystrd.at/modern-clean-css-sticky-footer/

By: Dean K

Dean K — Thu, 07 Mar 2013 11:00:51 +0000

As someone mentioned earlier, position absolute is not a good solution for a sticky footer. If you add enough content in main that causes the page to scroll, the footer will remain in it’s location at the bottom of the screen (similar to a fixed footer) and the content will go behind. If you scroll the page, the footer will stay in its absolute position and actually move up the page, always blocking the same portion of main’s content.

Simply put, the footer will not be pushed down below the content if the content are is taller then the viewport height.

By: Cassandra

Cassandra — Thu, 28 Feb 2013 17:28:06 +0000

Hi all! I’ve noticed an overwhelming positive response to this trick in particular, and have also noticed a lot of Chrome users having issues. I am re-evaluating this snippet to make it cross-browser friendly and will post an update soon!

By: How To Position Web Page Elements with HTML, CSS, and Absolute Positioning « Web Design Tips

Tue, 19 Feb 2013 21:53:10 +0000

By: Matt

Matt — Sat, 09 Feb 2013 06:27:53 +0000

I’m also running Chrome and wasn’t able to get this working properly. Were you guys able to get it working in Chrome correctly? Would love to know if the problem is on my end or not. Thanks.

By: Kevin Hazard

Kevin Hazard — Fri, 25 Jan 2013 15:11:06 +0000

Thanks for the tip, airtonix. As we put this together and tested it, the position:relative; didn’t appear to be necessary, but including it does appear to improve browser compatibility.