Understanding The Sticky Footer Trick

source: apexskiboots

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:

  1. The wrapper-push method (this is the commonest one on the internet as at the time of writing this piece)
  2. 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>

The css should look like below too:

html, body {
height: 100%;
margin: 0;
/* Trivial style make the text large */
font-size: 48px;
}
.wrapper {
min-height: 100%;

/* This is the same as the height of the footer */
margin-bottom: -100px;
}
/* The height of the footer and push must be the same */
.footer,
.push {
height: 100px;
}
.footer {
/* Trivial style to differentiate the footer */
background-color: #a12444;
}

Let’s take a closer look at the style rules!

The height: 100%; property on html makes sure that the base height which all html elements will be relative to is 100% of the height of the viewport. This is also specified on body so that it will take the height of the whole html.

The min-height: 100%; property on .wrapper makes the minimum height of the wrapper to be at least the height of the body (which is also the height of the viewport) while the margin-bottom: -100px; accounts for getting the footer to overlap the wrapper at the bottom. The .push div accounts for the area that the footer will overlap on the wrapper . This is necessary so that the footer won’t overlap some of the areas that need to be seen on the wrapper.

If you’ve done it well then your page should appear as below:

When the content is smaller than the height of the viewport (Wrapper-Push Method)
When the content is larger than the height of the view port (1). The footer is pushed to the bottom of the page.
When the content is larger than the height of the view port (2). The footer sticks to the bottom of the page.

Limitation

  • Even though it works in all browsers, it only works great when the height of the footer is known before hand.

The Flex Method

This is my most preferred method since it works great without knowing the height of the footer before hand.

It’s greatest limitation is that it requires browser prefix and sometimes have browser backward compatibility issues. The good news is that there are ways to handle this via npm modules. A good example is autoprefixer.

The html structure of your app should look like below:

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

And the css as shown below:

html, body {
height: 100%;
margin: 0;
/* Trivial style make the text large */
font-size: 48px;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
flex: 1;
}
footer {
/* Trivial style to differentiate the footer */
background-color: #a12444;
}

In the html structure, the pusher div has been removed. Also, body now has some more styles.

Let’s take a closer look at the added style rule

  • display: flex; sets body display to flex.
  • flex-direction: column; sets the direction of the flex display as column i.e main axis of the display is along the vertical axis
  • justify-content: space-between; makes main and footer in this context to appear at the top and the bottom of body respectively.
  • flex: 1; This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional. Setting the flex-grow property to 1 makes main to receive the specified proportion of the free space in the flex container. main takes it’s own space before footer takes it’s own.

Your page should appear as below:

When the content is smaller than the height of the viewport (Flex Method)

It behaves as the former when the content is larger than the height of the viewport too.

Limitation

  • It requires browser compatibility configuration/code.

Conclusion

If you are at this point then you should have learnt two ways of getting your footer to stick to your web page. I’ve used both methods several times but I enjoy using the second method for all my node projects.

Please note that I tested my code in Chrome Browser version 58.

To get more familiar with flex, try out FlexBox Froggy (an online game that teaches you flex.)

Thanks for reading!

If you liked this, click the 💚 below so other people will see this here on Medium. Also, if you have any questions or observations, use the comment section to share your thoughts/questions.

#10

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.