blog.nek0.eu/site/posts/2015-05-28-New-sticky-footer.md

56 lines
1.5 KiB
Markdown
Raw Permalink Normal View History

2016-03-01 07:03:27 +00:00
---
title: New sticky footer
author: nek0
tags: english, programming, meta
description: new method for sticky footer
---
Hello again.
A friend of mine, who is active in web-development, pointed out, that my method for creating a sticky foooter is a bit obsolete and showed me the proper CSS3 way to do it, which I would like to share.
First you need to prepare your site for the footer, which in the simplest terms may look like this:
```html
<html>
<head> some info </head>
<body class="site">
<div class="wrapper">
<header> Your header here </header>
<article> Content here </article>
</div>
<footer> Your awesome sticky footer </footer>
<body>
</html>
```
You simply wrap your entire content apart from your footer inside a `div`.
Next we're going to look on your css rules.
The `site` class needs a little setup:
```css
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
```
This rules put your whole site in a so called flexbox, which in our case expands vertically by setting the `flex-direction`. By doing so, wee need to specify the height of the flexbox, in our case `100vh`, which is the complete height of the viewport.
Next is the setup of the wrapper:
```css
.wrapper {
flex: 1;
}
```
This is it!
Now your wrapper should be docked always on the bottom of your page or at the bottom of your content, when your content gets longer than your viewport.
The great advantage of this method over my old setup is, that you don't need to know the height of your footer, it will fit in automagically.