Bootstrap Example of sticky footer is by far the best method (ignoring flex) for achieveing a Sticky footer. Bootstrap essentials has made class .has-sticky-footer to make .footer class sticky. So, if HTML needs a sticky footer use class .has-sticky-footer on html tag


    <!DOCTYPE html>
    <html class="has-sticky-footer">
        <head>
            ...
            <style>
                /* Values of body margin-bottom and footer height should be SAME */
                body {
                    margin-bottom: 60px;
                }
                .footer {
                    height: 60px;
                }
            </style>
        </head>
                
        <body>
            ...
            <footer class="footer" role="contentinfo">
                Some footer Content
            </footer>
        </body>
    </html>
            

Class on HTML tag only valid on doctype HTML5

Please refer to W3C document to know more.

The logic - How to make sticky footer?

Experts suggest solutions like flex, calc and viewport height, negative margins and bottom margin. Except flex the rest methods need a fixed height value. As I do not favour flex due to browser specific limitation, I favour bootstrap method and here's how its done.

Three elements play role in sticky footer:

  • HTML tag: This element is positioned relatively with minimum height of 100%.
  • FOOTER tag: This element is positioned absolute to bottom of page.
  • BODY tag: This element is give a bottom margin i.e. equal to the height of the footer.

FOOTER Height = BODY Margin Bottom

Step to make a Sticky footer

There is a lot of confusion in between young developers to achieve a sticky footer. Below are the step to do a sticky footer

  1. Add a class has-sticky-footer to HTML tag.

     <html class="has-sticky-footer" >
  2. Add a class .footer to your footer.

     <footer class="footer" >
  3. Calculate the height of your footer and add style of height: /* Your-footer-height */; to your footer element

     <footer class="footer" style="height: 60px;">
  4. (IMPORTANT) Finally, add style of margin-bottom: /* Your-footer-height */; to your BODY tag

     <body style="margin-bottom: 60px;">