Easy sticky footer - stop a footer from floating up a short page!
HTML-код
- Опубликовано: 27 июл 2024
- Having the footer of the page just floating around in the middle just looks... bad. So let's see how we can fix it with both flexbox and grid in this video! As an added bonus, both of them are really easy to do!
This CSS-Tricks articles has a few other ways, including different ways to do it with flexbox and grid in case you run into issues with this method - css-tricks.com/couple-takes-s...
#css #stickyfooter
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
I have wasted one day of life trying to do this on my own, and I wasn't successful at it.
You did it in 5 minutes.
Thank you bro.
Great video
This showed up right when I needed it! :D Thanks a lot, Kevin! Love your humble and friendly style, mate
Loving all of your videos and energy. Thank you for being a fantastic teacher
I've been searching for days how to do this and Margin-top: auto did the trick for me. Thank you so much!
Kevin your videos are great and very helpful. Thank you for these kind of content. Keep it up !
Thank you so much Kevin, you are the man!!!! I am currently doing your Responsive Website Layout on Scrimba and couldn't figure out how to get the footer to stick to the bottom. Tried for about half and hour just to get that thing down there. There were so many complicated "fixes" to this I tried but none really worked. But your solution worked like a charm!!!! You are very inspiring and I hope to be half as good as you one day.
Every video is like a gift that keeps on giving . I learn something new.... Love your channel.
As always, clear helpful and well explained video.
I spent way too much time trying to figure this out. Gave up on the last project trying to achieve this, there are so many "solutions" out there and none of them work. But this one worked flawlessly. Thanks!
This is very useful. It is also a solution that I was looking for. Thanks Kevin!
Thank you for taking your time to teaching us Kevin 🙇🏻♂️
This channel is a gem!
You truly are THE CSS MESSIAH. The flex was such a incredible solution, why did I not think of it ?!?
It was really that simple, huh... I seriously spent DAYS trying to figure out some complicated solution LOL thank you so much! I'm new to the web dev world and am taking a crack at making my own blog
Dear Kevin, thank You so much! Brilliant explanation!
I remember struggling to get sticky footers to work back in 2012-ish, and it's really amazing how much easier it is now! Even four years ago when this video came out!
I've spent hours trying to fix it using every method possible and none of the worked, but you manage to make my problem solved with basically 4 lines of CSS, thank you very much!!
Thx, your short tutorial had saved my life, it was killing me always, when faced short content web pages... 🙏
Just what I was looking for! Thank you for sharing.
OMG Thanks so much! I searched for like 2 hours till I found this awesome video. This is the only Video I found that really functions. ❤️
Thank you so much!!! This was the exact information I needed right now. Did really stuck for quite some time. Cheers
Excellent video. FYI - if you are using Angular, you apply everything explained here, not to the body, but rather to app-root (or whatever your root component is)
When working with WordPress, there will be some invisible elements in the tag.
A grid would give each element a row, but flexbox will not.
So, it's better to use display: flex
If you're using bootstrap this doesn't work currently, but you can do it with bs classes:
..
Very helpful video came across by chance. I just created footer in React and was having this problem. It really helpmed to solve this :)). Thank you!
Excellent tutorial, as always!!
Lol I needed this literally yesterday 😂
Edit : I still watched and thank you lol
Haha, sorry that it was one day late, lol.
Than you so much sir, i really needed that 7 min video straight to the point !!!!
Very good video with a good explanation!! I wish i had found your video sooner!! Thank you!! You realy saved me!!!
You are my hero!! It took me hours and hours to try to sort this out! thank you
Many thanks!!!
You save me, is very simple but, I was suffering for 3 days trying to fix this.
Thanks for sharing amazing thing! keep up the good work
wow I was searching for this fix so long. You finally helped solve it. Main thing I learned here is the body needs to have a min 100vh. Thanks!!
Thank you! came here after 2 hours try and your way solved it. Thank you
OMG finally. I could not figure out why I would copy and paste the code from my other pages that had the background color go all the way to the bottom but that one shorter page had a white banner on the bottom no matter what I did. I was going out of my mind. Thank you for this fix!
Good video. I wish saw it before my struggling :P
I know exactly how you feel!!
Very true this guy solves all my CSS and HTML problems
same here😑
Same here
RUclips recommends after we face that problem
Your expression of a stubborn footer at the beginning of the video is so accurate...
very helpful video
and New things I learn that's helpful for me
Ok that was too cool Kevin,
Thanks for the flexbox idea.
love your vids sir and great explanations.
Your tutorials are awesome!
You don't know for how long I've been looking for this
Very helpful video and thank you so much.
The King of CSS! Thank you Kevin!
exactly what i was looking for, thank you!!
Absolute bliss Thank you!!
Thanks for the simplest solution I have found at the moment :)
You're the best, Kevin.
Thank you. It was really helpful.
Instead of margin: auto (maybe you want specific margin-top on the footer in case of longer pages), you could use justify-self: flex-end on the footer, and flex-grow: 1 on the main content (above the footer, to fill up the space, otherwise flex-end won't work). And probably justify-items: flex-start on the body so the content will not be centered vertically, if it is short.
or you can do this too:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}
But overall, the Grid-methodology is still the best, because the footer is one hell of a very large sections of a page, it's the best to use Grid to put it in its region where it was supposed to be, the Grid is like having all its component situated already in their own region by using the grid lines. That's what I've tested...
Just what i was looking for 😁
Thank you so much this was so helpful
thank YOU! was struggling with this
Bro you are god sent ,spent whole day trying to figure out 😢😢....but finally you came through 😢😂😂
at 2:19 you solved my issue. Thank you so much. The rest of the video is also awesome
Nicely done !
my first time watching a css video and finished at by first watching loool ty so much!
thanks for sharing knowledge
Thank you so much, it helped me a lot~
Thank you so much! Spent hours trying to figure out why my footer was stuck in the middle of my short page.
Omg finally good vid about that! So good that you explained about height 100% extra. Thank you.
Thanks man! This helped me a lot :)
Thank you for saving my life 🥰
Thanks for the video!!
I just wanna say I appreciate you :)
this is so much easier, even the header now became sticky on top, like magic!
Thank you very much!
Thank you very much you are the best!!
great work
Simple solution indeed! The thumbnail to this gives me so much laughter; Thank You
Thanks a lot sir , It solved my problem with no issues.
I went through a bunch of sites but none of them were helpful , If It wasn't for you , my footer would've been a mess 😅😅😅
Thanks again 👍👍👍...
I'm just building my first 'local' website to feature all the apps I've been working on, and ALL of my pages have this issue. Thanks for the fix.
great video kev! i was struggling a lot to do this, mostly because my searches lead to users posting about fixing the footer, which is not easy on the eye. only problem i had was when content or cards had to load, it ends up as in 0:56
thank you! it was a big help..
Awesome video! Thank you! I think this will work too, You can set the body min-height to 100vh then subtract the height of the footer
body { min-height: calc (100vh - 80px);} 80px is the height of the footer
That would work too! but I don't like setting heights on things though. What if you need to change the height of the footer later (extra line of content maybe)? Then you also need to go and change the height in your calc().
Thank you,sir!
Thanks :D It works perfectly.
Extreme Helpful.
Wow thanks a lot!! i have this issue on mobile screen and you save me, thank U!!
Wow thanks Kevin! I thought there is no other solution beside putting more content to fill the space
Great video Kevin, keep up the great work.
My method is to:
1. set body min-height to 100vh
2. set footer wrapper to position sticky and top to 100%
I will need to test this more on mobile to see if the issue you mentioned exists and tweak it accordingly.
In that case, wouldn't the footer be slightly off the page on a short page?
@@KevinPowell it seems to be working ok for me :)
just mocked up a quick demo for you jsfiddle.net/rezurrection/kse6d3um/9/
This works well on desktop but not so much on mobile.
Really like your example. mind if I use it too?
You're wonderful!!!!! Thank you!!!!
THANKS KEVIN .
I struggled tooooo much......but after your solution.....i am feeling so good...
Thanks alot Sir...
Glad to hear that!
Thank you!
I love the creative thumbnail, great video! :)
Thanks this helped my problem :)
Thanks I always used JS before to fix this issue :)
I am going to make a video and use this thank you so much : )
your thumbnail is very relatable 😂. Thank you so much for this.
I'll give it a go. Thanks.
thank you so much!
i think i worked OMFG i love you so much man
thanks! very helpful :)
the p*10>lorem snippet is cool haha thanks
thank you so so much!
you saved my day!!
Some really good notes here! One thing I'd suggest which is what I do with mine (assuming header/main/footer, but can be adjusted) is on the body tag I simply put body{display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto;} and that does the trick just fine with only 3 lines of code. 😀
That would work, as long as you go "nav, content, footer" and stick with it :)
That would work, as long as you go "nav, content, footer" and stick with it :)
You can change the layout simply by updating the grid-template-rows value or using grid-template-areas as well. I always design with header main footer anyway and any content can be placed in the main tags
you saved my life with this
Hi Kevin, I was left wondering: why do you choose to use "margin-top: auto;" instead of "align-self: flex-end;"? I'm thinking that using "align-self" would allow you to still use a normal margin on your footer to create a minimal distance to your other content.
Thanks, man!!!