A **sticky footer** is a footer that sticks to the bottom of the page *regardless* of panel size.

Let's start by making a basic footer:

body{
    background-color: maroon;
    color: white;
    padding: 2em;
}

footer{
    background-color: black;
    color: white;
    padding: 0.5em;
}

<html>
 <head>
 </head>
 <body>
   <div id="content"/>
   This is the content body.
   </div>
 </body>

<footer>
   This is the footer
</footer>

</html>



// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

Set `display` to flex and `flex-direction` to column, in body. Also, set the `margin-top` to auto, in footer:

body{
    background-color: maroon;
    color: white;

    padding: 2em;

    display: flex;
    flex-direction: column;
}

footer{
    background-color: black;
    color: white;
    padding: 0.5em;

    margin-top: auto;
}

Now, set the `height` in *html* and `min-height` in *body* to 100%:

html{
    height: 100%;
}

body{
    background-color: maroon;
    color: white;

    display: flex;
    flex-direction: column;

    min-height: 100%;
}

footer{
    background-color: black;
    color: white;
    padding: 2em;
    margin-top: auto;
}

<html>
 <head>
 </head>
 <body>
   <div id="content"/>
   This is the content body.
   </div>
 </body>
<footer>
   This is the footer
</footer>

</html>

Let's see if changing the size of the ​panel and adding more content has any effect on it:

<html>
 <head>
 </head>
 <body>
   <div id="content"/>
   This is the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   This is still the content body.
   </div>
 </body>
<footer>
   This is the footer
</footer>

</html>

How to create a sticky footer in CSS

A sticky footer sticks to the bottom using flex-direction column, auto margin, and 100% height settings.