Recently, I stumbled upon two new ways to easily layout websites and to position elements. The first one is CSS3 Flexible Box Layout, or short Flexbox. The second one is CSS3 Grid Layout. This articles shows you can realise a sticky footer with these techniques.
Many years ago, we started to layout websites with tables. After that, the CSS specification evolved and we switched to blocks and floats. However, more complex layouts were still relatively complex to achieve. Often, some hacks or workarounds had to be used.
Lately, i was searching for modern approaches to layout websites. Luckily, the CSS3 specification provides new layout modes: Flexbox and Grid Layout.
The first one, Flexbox, has a good support by most browsers (except internet explorer …). The second one, Grid, also lacks support in IE and Edge at the moment.
First, let’s have a brief look into Flexbox and Grid building a so-called sticky footer.
Sticky Footer with CSS3 Flexbox
Our goal: we want to have our website footer stick to the bottom of the browser window, independent of the website content’s height. Most approaches rely on This concept is known as sticky footer. It can be easily realised using Flexbox.
The following HTML snippet depicts a typical website layout containing a header, a main part, and a footer.
<body> <header></header> <main></main> <footer></footer> </body>
The following code snippet to stick the footer to the bottom of the browser window works like a charm (in most browsers).
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
However, Internet Explorer 11 screwed up the layout, and the footer floated directly beyond my header. In IE the default value for flex is 0 0 auto rather than 0 1 auto.
Eventually, i found this workaround.
We have to exchange flex: 1 with flex: 1 0 auto or flex-grow: 1. Furthermore, we have to change min-height: 100vhto height: 100vh. This solution works both for IE and Chrome 🙂
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex: 1 0 auto;
}
footer, header {
flex-shrink: 0;
}
In case you are not sure if a certain browser supports a specific CSS command, i recommend checking it with caniuse.com.
To get a better feeling how Flexbox works, try the flexplorer.
Sticky Footer with CSS3 Grid Layout
For more complex layouts you might have a look into CSS Grid Layout. By using a grid concept, you can easily separate your website into rows and columns. Basically, a grid defines cells in which you can position your content. With the Grid Layout you can easily address specific cells, rows, columns, or even areas.
However, the specification has only partial support in IE and Edge. If you feel adventurous, use this polyfill.
Using the website layout from before, we can realise our sticky footer with the following CSS declarations.
We use grid-template-rows: 1fr 1fr auto to define three rows, whereas the first two span the same height. By the way, fr stands for fractional unit. By setting grid-row: 3/4, we define that the footer should be located in the third row.
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr 1fr auto;
}
footer {
grid-row: 3/4;
}
I won’t go into more detail, since others have already provided high-quality summaries for this topic.
If you are interested, have a look into this CSS Grid Layout guide, this introduction, or the official Grid Layout Specification.