A Clever Sticky Footer Technique

A Clever Sticky Footer Technique

Using this technique for a footer element on a website will save you time adjusting padding-bottom or margin-bottom of the page content that sits between the header and footer of your website pages. This technique is not widely used and is great for websites built minimally.
Photo-grammetry Reading A Clever Sticky Footer Technique 1 minute Next Svelte Crash Course

Chris Coyier wrote this at CSS Tricks on Nov 16, 2021 and as of this article most recently updated it on Nov 17, 2021.

This tutorial is really cool because it solves a common issue with the footer div elements. This should be adopted by CSS frameworks as an option. If you know of any out there doing such, please comment.

What your solving by reading this quick tutorial...

A paraphrase from Chris Coyier...

"The idea is that the footer will stick to the bottom of the viewport screen, even when the content of the webpage isn’t enough to push it down there. And if there is enough content, the footer is happily pushed down."

Read the tutorial here which features the example code embedded below...

See the Pen sticky footer sticky by Silvio (@silvio-r) on CodePen.


Leave a comment

All comments are moderated before being published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.