Understanding The Sticky Footer Trick

Ck Nitin
Oct 21, 2019
124
0
0
Article

I assume you must have googled many times and probably copied some code severally to get your footer to stick to the bottom of your web page. Secondly, you’ve never really focused on how easy it is to get it done.

This short piece will teach you how to get it done.

Let’s start!

There are two major ways of getting the sticky footer done in few minutes:

The wrapper-push method (this is the commonest one on the internet as at the time of writing this piece)
The flex method.

The Wrapper-Push Method

This method is fast but has some major limitations; the height of the footer must be known.

The html structure of your app should look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>The Sticky Footer Way</title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <main class='wrapper'>
      All contents apart from the footer's content should be placed here even the header
      <div class='push'></div>
    </main>
    <footer class='footer'>This is my Footer</footer>
  </body>
</html>