Sticky footers are footers that appear fixed to the bottom of the screen no matter where you/how far you’ve scrolled down the page. In theory, the position of a sticky footer should never change, and it should always be visible on a user’s screen.
Creating a sticky footer using CSS is actually pretty easy, and mostly just involves setting the footer’s position property to fixed. Take a look at the code below to see how it’s done. For the purposes of this example, let’s say that our footer has an ID of #sticky-footer.
#sticky-footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 50px;
width: 100%;
background: #66cdaa;
}
In the example above, the position is set to fixed, and the left and bottom values are both 0. These are the most important properties to include with your fixed header. The 100% width is recommended but not necessary in making a fixed footer — it really depends on how you want your footer to look and how wide you’d like it to be.
Height and background properties are completely up to your discretion. When setting the the height, just remember that the footer will ALWAYS be stuck to the bottom of your screen, so you probably don’t want it to be too tall and take up too much of your page at any given time.