Sticky Footer in React (Best Solution)

Показать описание

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:

👉 Discord: all my courses have a private Discord where I actively participate

0:00 Intro
0:10 Best solution in 2022 (Flexbox)
4:00 Worse solution 1 (position: absolute)
4:37 Worse solution 2 (CSS grid)
5:05 Worse solution 3 (min-height calc() for content)
5:56 Fixed footer

#stickyfooter #cssfooter #reactfooter #webdevelopment #coding #programming

Рекомендации по теме

Комментарии

These solutions seem simple, but take so darn long to solve/figure out! Thanks for sharing 🙏

arhabersham

Normally I don’t comment… but this time I wanna say just „thank you“ for the clean solution and the calm, simple and good explanation of the mechanism behind it. 👍

gnuf

thank you so much i spent hours on this but you explained it really well enough for me to understand and implement it in my website

dgeneral

Thank you Wesley, you've made my day!. Subscribed.

aNDy-qhem

bro, the satisfaction I felt when I set margin-top: auto; and that footer stuck to the botton was indescribable. Thank you!! I had solved this issue in another way but when the view port was tiny the footer would take the entire page because the position was fixed.

prpunk

You saved me thanks.. I'm starting with React and couldn't make and didn't think it was that easy, I did all these mistakes except for calc() and nothing worked, then tried the first one and worked just fine.

xandygameryt

THANK YOU SO MUCH, I love that u actually explained the fundamentals behind it, the most important aspects were:
margin-top: auto
and getting the parent element to have flexbox
Ty sir!!

juanhedderich

Wow the only video that actually made sense and worked. Thank you!

armenn

Thank you!!! ❤
Love your videos, very appreciative!

mister-bham

Thank you so much... most efficient solution ever!!

srinivasnahak

This worked perfectly for me! If you're using Tailwind to build a React app: set the parent div to `className="min-h-screen flex flex-col"` and your footer div to `className="mt-auto"`. Does the same thing as doing this in standard CSS.

colinmarshall

thanks, brother you really helped me.

utkarshsharma

wow! been looking this solution for months!! got lots of ways but all of them were horrible! Thank u !

kfirlankry

Thank you, I wish I found this video earlier, great explanation and solves the problem perfectly.

Martin-qymm

I was trying to keep any html out of my app jsx file but it worked out fine once all of the CSS was situated. I just had to delete the text-align:center, because it shifted everything on the page that I didn't want centered. Thanks for the tutorial!

Harpie.