Real Sticky Footer with Material Angular

I needed to set up a sticky footer as part of my Angular and Material Design experiment. You would not believe how many resource I could find (some of them listed below)!

Unfortunately, most of them had a problem; blank page looked fine (header and footer in the right places), but the page populated through angular would not refresh the footer’s position, it remaining at the bottom of the page. Not nice. The solution I found that works is the one from Ryan Fait which I’ll paste in below for quick reference:


All credit for this goes to its author!


All references below (and others you may find) work for static content nicely. However, the instant I placed generated content, the footer misbehaved (it stayed in the same place as if the page were blank). Only solution I could find to work was the first one from the list.

These are some of the reference points I could find.


A little experiment: If you find this post and ad below useful, please check the ad out :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top