If you ONLY KNEW how many friggin' hours I've spent searching for help on this exact same thing.... Dear God. My eye holes hurt!!! I told my husband I was ready to throw myself off a bridge!! Thank you SO much. I'm keeping up with you.
@@KevinPowell well, I fixed one thing, and it jacked up another. I'm so confused :( I wish I were more fluent. I quit my job to go back to school and I'll be 50 in December. I feel like my patience is diminishing. I thought I fixed the footer. It left a space in my header 😫 can you see this? www.sitesbydesign.altervista.com/cleo
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!!
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!
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.
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
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!
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
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.
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...
Dude, you're my saviour.. Margin: auto; split the difference of the remaining height after content above AND below the footer. Margin-top: auto; was the magic word. Beautiful.
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!
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)
Or if you use Next.js, its the nested div insitde body with "#__next". Or create a layout wrapper for the header, main, & footer & wrap that whole thing in a div & style that div in you don't want to style the "#__next" div.
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. 😀
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
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
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 👍👍👍...
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().
05:50 "if you know another way" An obvious 200 IQ way Or you can let your cat to sit on a keyboard. Then change the masterpiece text' color to background color.
Other two methods I just figured out trying was a not so good method I would say, through giving position absolute to the footer and "bottom: 0;". Another way is giving the body the 100vh height or the alternatives the video gave and justify-content: space-between.
with grid it is one line of code + on body 100dvh not 100vh, and grid: 1fr auto / auto = 1fr for body container row and auto for footer row / auto column width
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
If you ONLY KNEW how many friggin' hours I've spent searching for help on this exact same thing.... Dear God. My eye holes hurt!!! I told my husband I was ready to throw myself off a bridge!! Thank you SO much. I'm keeping up with you.
Glad I could help before you made it to the bridge :D
@@KevinPowell well, I fixed one thing, and it jacked up another. I'm so confused :( I wish I were more fluent. I quit my job to go back to school and I'll be 50 in December. I feel like my patience is diminishing. I thought I fixed the footer. It left a space in my header 😫 can you see this? www.sitesbydesign.altervista.com/cleo
The bridge is down the street... 🤣😫🤪 I know it's something dumb.
And I took all the stuff out to get the space out, but I'm left with the original problem.
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!!
If you're using bootstrap this doesn't work currently, but you can do it with bs classes:
..
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!
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?
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
This channel is a gem!
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!
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
at 2:19 you solved my issue. Thank you so much. The rest of the video is also awesome
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.
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...
Dude, you're my saviour.. Margin: auto; split the difference of the remaining height after content above AND below the footer. Margin-top: auto; was the magic word. Beautiful.
I've been searching for days how to do this and Margin-top: auto did the trick for me. Thank you so much!
Thank you for taking your time to teaching us Kevin 🙇🏻♂️
Lol I needed this literally yesterday 😂
Edit : I still watched and thank you lol
Haha, sorry that it was one day late, lol.
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!
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)
Or if you use Next.js, its the nested div insitde body with "#__next". Or create a layout wrapper for the header, main, & footer & wrap that whole thing in a div & style that div in you don't want to style the "#__next" div.
This showed up right when I needed it! :D Thanks a lot, Kevin! Love your humble and friendly style, mate
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. ❤️
You truly are THE CSS MESSIAH. The flex was such a incredible solution, why did I not think of it ?!?
The King of CSS! Thank you Kevin!
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
TH-cam recommends after we face that problem
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
The best thumbnail ever 😂. Love your videos. They are very beginner friendly and informative.
I struggled tooooo much......but after your solution.....i am feeling so good...
Thanks alot Sir...
Glad to hear that!
Your expression of a stubborn footer at the beginning of the video is so accurate...
Every video is like a gift that keeps on giving . I learn something new.... Love your channel.
Bro you are god sent ,spent whole day trying to figure out 😢😢....but finally you came through 😢😂😂
Thx, your short tutorial had saved my life, it was killing me always, when faced short content web pages... 🙏
Many thanks!!!
You save me, is very simple but, I was suffering for 3 days trying to fix this.
Thank you so much! Spent hours trying to figure out why my footer was stuck in the middle of my short page.
You are my hero!! It took me hours and hours to try to sort this out! thank you
Simple solution indeed! The thumbnail to this gives me so much laughter; Thank You
Loving all of your videos and energy. Thank you for being a fantastic teacher
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
Than you so much sir, i really needed that 7 min video straight to the point !!!!
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
As always, clear helpful and well explained video.
You're the best, Kevin.
This is very useful. It is also a solution that I was looking for. Thanks Kevin!
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.
your thumbnail is very relatable 😂. Thank you so much for this.
Thank you so much!!! This was the exact information I needed right now. Did really stuck for quite some time. Cheers
You don't know for how long I've been looking for this
I love the creative thumbnail, great video! :)
this is so much easier, even the header now became sticky on top, like magic!
Ok that was too cool Kevin,
Thanks for the flexbox idea.
my first time watching a css video and finished at by first watching loool ty so much!
I DON'T UNDERSTAND WHY IS CSS SUCH AN HEADACHE FOR ME!!
0H GOD!!
This video helped me a lot!
Kevin your videos are great and very helpful. Thank you for these kind of content. Keep it up !
I just wanna say I appreciate you :)
Inilah definisi jenius sesungguhnya!!!! Aku udah buang² waktu berhari-hari dan jawabannya ada di sini cuma 5 menit:)
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!
Dear Kevin, thank You so much! Brilliant explanation!
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 👍👍👍...
Haha the thumbnail is awesome
Thanks :)
Excellent tutorial, as always!!
Omg finally good vid about that! So good that you explained about height 100% extra. Thank you.
Very good video with a good explanation!! I wish i had found your video sooner!! Thank you!! You realy saved me!!!
bumped into this issue today and tadaa here's the solution
Thanks for the simplest solution I have found at the moment :)
i think i worked OMFG i love you so much man
Thanks for sharing amazing thing! keep up the good work
very helpful video
and New things I learn that's helpful for me
Your tutorials are awesome!
the p*10>lorem snippet is cool haha thanks
I just use margin-top:25vh; and it kinda works for me except for there's a bit gap between the body and the footer
Just what I was looking for! Thank you for sharing.
thank YOU! was struggling with this
Thank you for saving my life 🥰
exactly what i was looking for, thank you!!
Now I can stop using my vh bad stuff, it really helped me !
Nicely done, Kevin! Thanks for your continued effort. We should hang out in your discord server sometime....
Thanks. For react app, do this modification:
html {height: 100%}
body {height: 100%}
#root {display: flex; flex-direction: column; min-height: 100%}
thanks bro!
You're welcome
Thank you. It was really helpful.
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().
Absolute bliss Thank you!!
thumbnail is awesome🤣🤣🤣
Just what i was looking for 😁
This destroyed my many hours but now is ee your video so thanks for it
Thank you so much this was so helpful
05:50 "if you know another way"
An obvious 200 IQ way
Or you can let your cat to sit on a keyboard. Then change the masterpiece text' color to background color.
Very helpful video and thank you so much.
Other two methods I just figured out trying was a not so good method I would say, through giving position absolute to the footer and "bottom: 0;". Another way is giving the body the 100vh height or the alternatives the video gave and justify-content: space-between.
Wow thanks a lot!! i have this issue on mobile screen and you save me, thank U!!
Nicely done !
Thank you so mucuh !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! LOve from India !
I'll give it a go. Thanks.
THANKS LORD... After almost smashing my head on my desk.
with grid it is one line of code + on body 100dvh not 100vh, and grid: 1fr auto / auto = 1fr for body container row and auto for footer row / auto column width
Thanks man! This helped me a lot :)
THANKS KEVIN .
Though i know how to do that, stopped here to tell you what a wonderful thumbnail, Kevin :D
Thanks :D
love your vids sir and great explanations.
Wow thanks Kevin! I thought there is no other solution beside putting more content to fill the space
Thanks for the video!!
I am going to make a video and use this thank you so much : )
Thanks this helped my problem :)