Sticky Footer: CSS Tutorial (Day 13 of CSS3 in 30 Days)

Learn how to make a CSS Sticky Footer!

⭐️Files you need ⭐️
💻Sticky Foote Code:
💻All tutorials in this series need this “_theme-styles” directory (only download once):

This video works as a stand-alone tutorial but is also day 13 of CSS3 in 30 Days. For the rest of the series, check out this playlist:

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:


This Post Has 17 Comments

  1. Phillip Shim

    Is this better way than giving footer "fixed" property?

  2. Mohit Bagadiya

    Can you make python's advance cource because begineer already has been uploaded? I am waiting..

  3. is the awesome channel. I have learned a lot from here and started my own channel being influenced to share knowledge. You have brought great change to me. Thank you so much. I would always seek for the feedback or any suggestions. Lot's of respect and love to you.😊

  4. Rook

    Option where footer height can be unknown: give .sticky-footer-lesson display:flex; flex-direction:column; min-height:100vh; give .page-content flex:1;

  5. I don't understand why this and why not use position:fixed with bottom:0 for the footer?! wouldn't that be a better choice for a sticky footer? I guess that goes same for the header too

  6. Yassine Farroud

    Hi everyone, i don't understand why we use after element we can do that without after element ? plz explain to me

  7. Tom

    Thank you so much! I tried 5 methods and none of them worked. yours finally made it!

  8. Tinned


  9. Meh

    Thank you so much. BTW 0:44, is it just me or did you just forget to cut that?

Leave a Reply