Pure CSS Sticky Footer with CSS3 Flexbox - Push Footer at Bottom of Page When Content is Less

Responsive Sticky Footer with Pure CSS can be easily created by using CSS3 Flexbox properties without using javascript or jquery. Of course, plenty of methods are available to create a CSS sticky footer, but I think to create a CSS responsive sticky footer wouldn't be that much easier without using the css3 flexbox property. It will not only take care of pushing the footer to bottom of page but also takes care of how the contents will be affected above the sticky footer.
😍😍 This tutorial has been upadted 2020-21: • Sticky Footer with CSS... 🤗🤗
• Pure CSS Sticky Footer...
CSS STICKY FOOTER - WHAT IS IT?
While working on web design projects, we often asked to create CSS sticky footer which can push the footer at the bottom of the page when there is not enough content on the page. Also, creating a responsive sticky footer with CSS is essential so that it can be adapted to wide range of mobile, tablet and desktop devices easily.
CREATE RESPONSIVE STICKY FOOTER WITH CSS3 FLEXBOX MODULE - A BETTER APPROACH
Many developers are still relying on the jquery or javascript like stuff to create sticky footer to push the footer to the bottom of the page when there is less content on the page.
But there is a quick and reliable method available to create a CSS responsive sticky footer, simply by utilizing the CSS3 flexbox module.
The footer should not have a fixed height and CSS responsive sticky footer should be able to force or stick itself to the bottom of the page if the page content is short in amount.
So let's have a look how we can force our footer to the bottom of browser's viewport or the page when there is less content and it is whenever required.
The flexbox module's flex-grow and flex-shrink property will help our content to push footer to the bottom of the page when content is less on the desktop or mobile browsers.
BROWSER SUPPORT FOR THIS METHOD
The method you will be learning in this video tutorial to create a sticky footer with CSS will be supported in internet explorer 10 and above and in all the modern chrome, safari, firefox etc browsers which provide support for the CSS flexbox.
========DOWNLOAD STICKY FOOTER SOURCE CODE========
goo.gl/fS3wBK
============Useful Tutorials=============
Creating a stitched border look with css
• CSS Stitched Border Ef...
Creating Multiple borders effect using CSS
goo.gl/UbVmwR
Creating Multilevel horizontal Navigation Bar using Flexbox
goo.gl/Erkzp6
Creating Simple Responsive Horizontal Menu using CSS3 Flex
goo.gl/8efLMN
Creating a Masonry Layout Using Pure CSS3
goo.gl/QFNVJa
Creating a Custom Select Box Element
goo.gl/uj46tI
How to create simple css3 preloading animation
goo.gl/GqjXCr
How to add preloader to your web page using javascript
goo.gl/ZugNcP

[@samiullah9154]

What does it mean by flex: 1:??

[@smashtheshell]

Hi, When we declare the flex: 1; we are effectively setting flex-grow value of the flex items to 1; which in turn means that we are saying that particular flex item (.content class in this case) to grow as much as it can to fit the available space available in it's container(body element in this case). Hope it helps! Let me know if you still have any questions. Thanks 😊

[@samiullah9154]

@@smashtheshell but applying flex on body seems an inefficient approach .

[@smashtheshell]

@@samiullah9154 The answer is it depends what you're trying to create and the same principle is applicable on any container on which flex is applied. This video is just a demo to show how flex can solve this particular issue. Hope you understand! 😊

[@samiullah9154]

@@smashtheshell I applied position:absolute, bottom:0px on footer element and then applied flex on child element to arrange actual elements of footer like about us contact etc. But the width of the footer get shrinked, to solve this problem I have explicitly define width: 100% in footer element. But I don't know what happened under the hood, it was just random try. Can you please, explain this behavior?

[@smashtheshell]

There is no need to position the footer absolutely just to push it to the bottom. Checkout this example:
codepen.io/smashtheshell/pen/abZPWQW
You can use flex on the footer without any issues. However just remember to subtract the actual computed height of the footer from the .page-container height. See the pen for more description.

[@ershadulbari2252]

Thank you soo much!! really helpful. Every other guy on youtube was giving the same damn solution & unfortunately, I couldn't follow that because of some reason. Your way of solving genuinely helped me. Love from Bangladesh

[@smashtheshell]

Thanks for your appreciation. ☺️

[@iam_jeremy]

I just wanna say that you are the only one who solved my problem! Thank you so much!

[@Zihanforall]

Thank you so much!

[@thinkyeah7807]

Thank you!

[@shuganaga2765]

I am following you! You went straight to the point and I have no problem whatsoever! Thank you! : )

[@hocicudo]

This really works with responsive design, thanks!

[@JulianRioja-km5mo]

thank you!

[@cjdj1834]

You saved my project, thank you sir

[@83greene]

Worked perfectly for me in bootstrap 4! Thanks for this!

[@smashtheshell]

Hi Krystyna Garwol, I am glad that it worked for you! 🙂

[@tommyzDad]

Thank you so much for this tutorial, esp. for including how to fix the issues in IE!
Subscribed!

[@smashtheshell]

Thank you. I am glad you liked the video and subscribed to the channel.

[@sweetsunshine7573]

Thank u soooooooo much i tried every solution possible nd nth worked,thank u thank u

[@indraninagari4914]

Great

[@MikeXwolf]

Thank you! Very good tutorial, super useful

[@ShurikenBobomb]

Thank you! I didn't like the other methods used to get the same result using Flexbox.

[@eric.m5790]

Thanks !! you helped me a lot

[@ktoufik3047]

Great solution ,thank you

[@rchelitk8447]

You are great my friend ! thank you

[@rwill.7313]

THANK YOU!! You did it! I very much appreciate it!

[@suckilyify]

awesome thanks bro.

[@cezarvovan]

thanks a lot! Greetings!

[@vkendal1000]

It's ok now. I set the same background-color on html as well.

[@smashtheshell]

great! Nice workaround for it probably! 🙂

[@vkendal1000]

Thank you, liked the video. It works but if my content is long, when I scroll down, my background-color (of body) stops at the bottom of the view port. The background-color continues if my remove height: 100vh -- but that is needed when the content is short. Any idea to work around this, Mr Smasher?

[@ankittiwary3712]

awesome!!

[@smashtheshell]

Thanks, bro! :)

[@pianoLee-sx9dx]

I don't understand.... No matter which method I am using, it doesn't work..