Keeping Footer at the Bottom of the Page (HTML & CSS)
HTML-код
- Опубликовано: 2 июн 2024
- Learn how to keep the footer at the bottom of the page, even if the content above it is too short to naturally push it to the bottom, using CSS.
First, the case where the footer will always be positioned at the bottom of the page, but not fixed, will be examined, followed by the case of a fixed (sticky) footer at the bottom of the page.
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Card Flip Effect (HTML & CSS): • Card Flip Effect (HTML...
Back to Top Button with HTML, CSS and JavaScript: • Back to Top Button wit...
Colorful Background with linear-gradient: • Colorful Background wi...
Currency Converter with HTML, CSS and JavaScript: • Currency Converter wit...
Font Awesome 5 Icons: • Font Awesome 5 Icons
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
Awesome Tut! Thanks for covering multiple options, especially the sticky footer. Also, thanks for mentioning the Js snippet for automatic date updating! That's so handy!!
Amazing! Thank you for the nice words 🙂 Very glad you liked it!!
The first option works perfectly with long single page sites in all responsive breakpoints. Thank you so much!
Hands down the best solution for this problem! Thank you for ending my 3 hours of searching endlessly!
Super! You can now proceed to solving the next problem 😉 All the best, keep coding 💙
same here, even more hours :)
Thank you! It's wonderful what a few bits of well written CSS can do. Love it.
Totally agree, CSS rocks! 😉
solution: 6:32
Great tutorial, one of the best and most straight to the point I have seen.
🙏💙💙
Thanks for making the video. Very simple and to the point. I like the aside about the jscript for the year.
Keep the videos coming, it is appreciated.
Oh thank you for the lovely comment 🙂 Very glad you liked it! I will 😉 Take care!!
Perfect tutorial, helped out tremendously! Thanks a lot!
thanks -- the padding-bottom on body really helped me.
Superb man! After watching almost 15 videos I landed here and to be honest it was totally worth it. Brilliant
Oh thank you for the lovely comment!! Very glad you found this useful 🙂
@@CodingJourney You're a genius... Thanks so much for sharing us this video. (Sorry for my bad english)
@@Roberto-ep5qd Oh thanks man! Very glad you like it 🙂 Keep coding!! 😉💙
I really learnt something which other front end ytubers haven't mentioned thanks and keep growing;) GL
Very glad to hear that mate! Thanks for the lovely comment 🙂 You too, all the best!!!
Amazing approach, thank you!
got exact what Im looking for Awesome
Incredible how fast and efficiently you can make a good looking web page! btw thx you helped me so much
My pleasure 🙂 Very happy to hear that!! 💙
Excellent video!! Thank you.
I'm searching for this kind of video to resolve my problem with footer not sticking at the bottom for almost 3h, thanks man, you're great!!!
Oh thank you for the lovely message 🙏🙂 Very glad it helped! 💙
Nice and clear as usual. THANKS!!
Saved me twice. Thank You and have my sub! :D
Heh 😉 Thanks mate, welcome aboard! 💙💙
Seriously bruh, thanks best Tutorial ever, thanks for ending my 4 hour long search , God bless, you have my subscribe and like for sure 😁
Thanks mate! Huge love, keep coding! 🙂💙
You saved my life, thanks!
Thank you so much! Very helpful.
Thank you genius! I was trying to place my footer and this was the best solution for my project.
Amazing! Glad this was helpful. All the best, keep coding!! 💙
Worked very well, thanks God bless u
Excellent video learned alot thank you!
you are gold man
this video is awe, it explain a lot in a clear way, thank you man
Thank you for the lovely comment 🙂 Glad you liked it!!
Thank you man. This helped me.
Super! My pleasure 🙂
Thanks a lot man! Some information in this one, made all the difference here!
Amazing mate, very glad you liked it!! The "that made all the difference" reminded me one of my favorite poems..."The road not taken" 🙂😉
This is the video I'm looking for thank you so much 👍
Amazing, my pleasure 🙂💙
Very cool... Well explained 👍👏.. Look forward to more tips from this channel
thank u 100000x times u got a new loyal subscriber
Heh totally my pleasure 🙂 Welcome aboard!! Keep coding and enjoy the journey 🙂💙💙
Thank You so much you sort out my problem of footer
You are a lifesaver!!!!
thanks from Brazil!
Heh! Amazing, very glad it helped 🙂 My warmest greetings to Brazil!! 🙂
Thank you so much i was finding this all day
Amazing! Very glad I could help 🙂
@Manju Bhai Mee too
Thank you you're a lifesaver!
I'm just a web developer 🙂 But very glad to hear you found this useful!!
This is awesome. Thank you!
Amazing! Very glad you liked it!! 🙂
Very simple when you explain , thanks!
Thank you! Very glad it was helpful! 💙🙂
Thank you so much. You are awesome. 🙌
You are 😉 Glad you liked it, my pleasure!!
Soo helpful! I've been stuck at this the whole day, thank-you!!!!
My pleasure! Very glad it helped 🙂
Honestly. Knowing that it’s a footer it should automatically stay at the bottom without having to use a fixed position 😩
@@JJSfromCHI Heh! Yeap, would be nice if this was the default behavior 🙂
@@JJSfromCHI yup that's unfortunate and annoying 🥴
Wow seriously thank you so much. i couldnt figure out why my footer kept moving around everywhere each time my content size went down.
🙂 My pleasure! Very glad to hear that this helped! All the best, keep coding 😉
Thaanks bro!
from Costa Rica!♥
My pleasure!! 🙂 Warm greetings to Costa Rica 💙💙
Thank you so much for this video!
My pleasure 🙂 Very glad it was helpful!!
Thank you so much man. This helped me so well and was really clear.
Amazing! Very glad you found this useful. Thanks for the lovely comment 🙂
Footers are really very stubborn to control. Thank you for taking time to make this video. It made my task very easy.
Amazing! My pleasure, very glad it helped 😉💙
Thanks man!! So useful!
Amazing! Very glad it helped 🙂
You helped me a lot. Thank you so much!
My pleasure 🙂 Very glad to hear that! Keep coding 😉
Thanks very much! :)
Awesome! Thanks!
Coolio!! My pleasure 😊
Dude thank you so much, this has been very helpful! I really appreciate it!
Amazing! Glad it helped 🙂 Just watched your home-made hand sanitizer video...I will definitely follow your instructions...don't have an orange though so I will use grapefruit instead, hope it still works 😉😁💙
@@CodingJourney oh it will! I forgot to mention it's primarily the citrus that does it 😂 how long you been programming for?
Heheh 😉🙂 Well I've been programming for a while...very specific I know 😂 Wrote my first line of code about 15 years ago but I've been in and out of programming...into web development the past 3 years or so 🙂
@@CodingJourney Thats awesome. Its been interesting to see how far people are along in their journey and where they want to go!
Indeed!! Also, coding community rocks 😁😉💙💙
you literally saved me, god bless u
🙏💙💙
Helped me alot thanks
THANK YOU!!
You are amazing! Thank you!
You are! 😉 Very glad you liked it 🙂
I like this approach. I always struggle with footer positioning, so I'm trying this in my current project that I just started. If it all works okay, I'll make this my go-to footer positioning method (:
🤞🙂 All the best mate, keep coding!! 😉
Excellent and well explained 👌 - Thanks
The solution with the calc it's AMAZING!
Thanks mate! So are you 😉 Keep coding!!
I realize it is pretty randomly asking but does anyone know a good site to stream new series online?
@Braydon Kolton try Flixzone. You can find it by googling :)
thank you so much ! This is so helpful !
Amazing! Pleasure is all mine 😊
Thanks Mate! That really helped me!
Amazing! Very glad it helped 🙂
Excellent, thanks!
It saved lots of time for me.
Amazing!! 💙
Thank you so much sir! :D
Awesome💕💕
Great video! Thanks Bro :D
Amazing! Very glad you liked it 🙂💙
Thank you. Nice video
My pleasure! Glad you liked it 🙂
Thanks a lot for this tutorial, it was easy to follow and fun to learn. I like your style. It's relaxed and down to earth.
Oooh thank you for the nice words! Very glad you liked it :)
@@CodingJourney Not a problem mate. I was watching another tutorial about how to solve this issue with the footer, and they showed how to "push" it down to the bottom with content. I thought that was a pretty dodgy and unprofessional way of doing things. Your way is much better!
Thanks mate! Well, I'm doing my small research before each video trying to present the best solutions, according to my opinion of course :) And over time new ways of solving problems come up...for example if I made this video today, I would also probably present a solution using flexbox...things never get boring in web development ;)
@@CodingJourney Absolutely. Things are constantly evolving all the time and that's the fun part about it I think. I'll stay tuned for new videos!
Best explanation so far, thanks so much
Thanks man! Glad you liked it!!
Thanks dude!
Happy to help 🙂💙
thank you so much man, it works for me
Amazing mate!! Very happy to hear that 🙂
Thanks, Developer great Help.
🙂❤🙏
I really appreciate, thank you. I'd like that you do a video to explain the position of the articles and sections within the main of the page
Very glad you liked it 🙂 Nice suggestion, thanks! I currently have many many things lined-up though so I'm quite certain that by the time I will be able to upload such a video you will already be able to create all sorts of layouts!! 😉🙂
thanks a lot, man you probably save my job!
Hahah! Googling and searching for solutions is part of the job, so you saved it 😉💙
This is the best tutorial concerning this subject. This has work for me, thanks to your style of teaching. One question, I see you don't put # in your css before body, headder, footer etc. Is this because you are using html5 and the others don't ? Thank you very much in advance!
Hey thanks, glad you found this useful 🙂 Regarding your question, nope this has nothing to do with HTML5 (which btw I guess that's what others are using as well since it has already been around for about a decade). This has to do with "CSS selectors" or in other words how we can select HTML elements to style with CSS. "#" is used as an id selector, e.g. to select an element with id="footer", we would use the #footer selector. But in our case we are using the HTML tag, which we can simply select using footer (element selector). For more info you can google/search for "CSS selectors"! All the best, keep coding 😉💙
You are amazing
Yes you are!! 😉🙂 Thanks mate 💙
Thanks!!
Really good video. Very professional
Oh thank you 🙂 Very glad you liked it!
Thank you so much 👍
My pleasure! Glad you liked it!! 💙
Thankyou !
Thanks man!
🙏🙂
awesome video
bravo bro best and beautiful work
Oh thanks bro, very glad you liked it!! Keep coding 😉
Great content 👌
Thanks mate 🍻💙
very nice job sir !! You have been of great help !!! Thank you !! best wishes to you !!
Ooooh thank you for the nice words 🙏 Very glad it helped! U2, all the best!!
@@CodingJourney Sir I am currently looking for job hopefully I shall get it soon.
@@adityadighe1582 Good luck!! Keep trying and improving your skills and it will happen!
Thank you very much.
My pleasure! Glad you liked it 🙂
Love you bro
Thanks a lot
perfect one :) thanks for sharing
Excellent, thanks!! Glad you liked it 🙂
You are superb 👌
Great explanation 👌 Thank you for sharing it
Totally my pleasure! Glad you found this useful!! Keep coding 😉💙
@@CodingJourney It really is 👌 🤗 thanks!
Thank you
Made my day easy
Very glad to hear that 🙂 Made my day better 😉💙
Thank you so muchhh 🥺 Day after tommorow I have practical exam and I need to make a website in 45 mins
It was so helpful 👍
My pleasure, very glad this was helpful! All the best to your exam 💙 P.S. don't just watch videos, but code along and at some point try to create stuff from scratch on you own!!
@@CodingJourney yeah I tried in my own code at the same time and the second method worked so I commented... The calc function didn't work..
@@CodingJourney And Thank You So Much💫
thanks 4 video
thank you it helped :)
Very glad to hear that 😉
Thank you for the nice video. How can we make the header, main and footer responsive?
thank you so much!!!
My pleasure!! Very glad it helped 🙂
Really well explained ! Thank you for this vid, you saved me on this one ;)
Ooooh very glad to hear that!! 🙂 My pleasure 🙂
Thank you very much
Totally my pleasure!!
Thanks!
Still the best tutorial on this very annoying thing! thanks.
🙂 Very glad it helped!!
thank you