Sticky Footer in CSS (Best Solution)

[@ByteGrad]

Mastering JavaScript is crucial if you want to be a modern, professional developer: ruclips.net/video/qVmpJDQxucE/видео.html

[@jakubklewicki5925]

🤩Wasted so much time before i manage to get here...Brilliant and simple.🤩

[@PavanSibal]

Good tutorial. In the flex box solution when u added more content the footer did disappear at first. How can we avoid that?

Hey ByteGrad, great video, thanks!
The problem with your first solution is that you can't vertically center the main content, like when you have a small login form, for example, and you need that to be centered on the screen.

[@nishaadjadhav]

very simple solution, thanks

[@MrHamidG]

First tnx for this great tutorial. I did it as you said but have still one problem. I would appreciate it if you could answer it. In my body I have at the left side a scrollable content and on the right side a panel which stick to the top of screen. Now when I scroll at the end where my footer will come, the sticky panel on the right side loose it's sticky functionality and move to top of the page. This mis-behaviour happens only in Firefox and in other browser it is fine. Can you maybe help me :D. Tnx in advance

[@shashanksingh4708]

wan't able to understand why we required display : flex first

[@ecommerce9926]

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}

[@Fatima-ie5kj]

thankyou for this short video

[@tochimclaren]

The flex on the body makes the children shrink even when 100% width/min width is added.

[@arshad1781]

Thanks

[@arshad1781]

Nice 👍