Flexbox Sticky Footer: Cleaner, Hack Free Flex-Direction CSS

flexbox sticky footer

Back in the old days, We use floats and Jquery sorts of hacks to sticky your site footer at the end of the page. But flexbox solves this problem with few lines of CSS.

Fixing footer always required when you don’t have much content on your web page. And 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 allow you to done your complicated CSS jobs quickly with few lines of code.

By the help of display: flex; I am able to do today tutorial about almost 50%.

And a 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 use min-height: 100vh; to body to make the body at full height.

As for a content area, The flex: 1; allow me to able to finish this job completely.

Flexbox will not be supported in old browsers such as IE from 6 to IE 9 opera-mini 12, IE 10 and 11 will have unfixed bugs and IE 11 with UC Android also works with bugs. Use Js instead of CSS flexbox if possible.

There is another way to make simple CSS footer sticky fixed 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 kind of browsers, Then the js-driven version is more preferred and suitable to use.

How to Create Flex-Direction CSS Sticky Footer

In the example down below, What we have done is to add a class site to the body element. Next, we have a header 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 later in the CSS section.

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

The HTML

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

The CSS

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;solve 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 do to make the footer at fixed the bottom by using the flex method.

Hope you like it and if you so then don’t forget to leave a comment and share on your facebook wall.

Code ExamplesYou May Also Like