Create sticky footer in Html using CSS

In some HTML design, you need a footer that is fixed in the page bottom. We are explaining the best way to add sticky footer using HTML and CSS.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -70px;
}
.footer,.spacer{
    height: 70px;
}

<html>
  <head>
    <style>
        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        .container {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -70px;
        }
        .footer,.spacer{
            height: 70px;
        }
    </style>
  </head>
  <body>
    <div class="container" style="background:yellow;">
        This is main container items.
        <div class="spacer"></div>
    </div>
    
    <div class="footer" style="background: blue;">
        This is footer.
    </div>
  </body>
</html>

Output:

Keywords:

Sticky footer Fixed footer in page bottom