Flexbox Sticky Footer using Pure CSS

Today, I’m going to show you how to create a flexbox sticky footer using pure CSS.  Back in the old days, we use floats and jQuery sorts of hacks to sticky the site footer at the end of the page.

Nowadays, with the help of new CSS property display flex, we can easily fix the footer at the bottom of the page. Yes, but without using any hack.

Fixing footers always required when a page doesn’t have much content on the home page. To avoid a page look bad, we need to make a footer area stay at the bottom of the page. No matter how much content we have.

You may be thinking that What is flexbox? Uh, It is a nice display property of CSS which allows you to done your complicated CSS jobs quickly with few lines of code.

With the help of display: flex; we can achieve our goal by almost 50%. The big thanks to flex-direction: column; which make it possible almost 80% job done.

What do you think about VH? That’s really awesome and I always love it because it allows me to show full-height page — No matter device screen resolution.

In my case, I will use min-height: 100vh; to the body to make the body at full height. Finally, for the content area, the allow me to able to finish this job completely.

How to Create Flexbox Sticky Footer

There is another method called CSS footer sticky which set the footer at the bottom of a page is using jQuery or Javascript but people would like to say there is no reason to use for something as trivial, the flexbox method is preferred.

If you want footer should work on all kinds of browsers, Then the js-driven version is more preferred and suitable to use.

Flexbox isn’t supported by old browsers. Such as IE from 6 to IE 9 opera-mini 12, IE 10 and 11 will have unfixed bugs and IE 11. Use Js instead of CSS flexbox if possible.

The HTML

In the example below, we have defined a class site to the body element. Next, we have a header element is defined as simple as we normally do for our website template building.

The main content area needs some attention and that’s the reason, We have added a class site-content which will be taking care of later in the CSS section.

At last, We simply define the footer element which will be fixed at the bottom of a page.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS Styles

The CSS is pretty much simple and you can see we don’t need to write hundreds of lines of code to get our job done.

What we all have to do is to style the body and the content area, The footer will automatically stick at the end of the page.

We use display: flex; which make our job easy and the min-height: 100vh;solutions our rest of problem about height. The VH will take all the white space of a page.

And the flex-direction which is sub-property of flexbox allow me to set column? The column makes happen same as row but top to bottom.

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

Lastly, we just need to take care of the main content area and this can be easily done with flex: 1;

.Site-content {
  flex: 1;
}

That’s what we simply need to make the footer fixed at the bottom by using the flex method. I hope you like it and if you do then don’t forget to leave a comment. Share it on your Facebook wall.

You Might Be Interested In: