This site is being remade and I won't be updating this for a while. Expect a lot of broken links, design and functionality. If all goes well, things should be stable by the end of 2022. Thank you for understanding.


Sticky Footer Using Flexbox With Just 4 CSS Declarations


In short, you want to make <body> a flex container with min-height: 100vh;, in the column direction and give the <main> element flex-grow: 1;. This will give the <main> element any remaining space, pushing the footer to the bottom.

Assuming this structure:

    <header><!-- ... --></header>
        Whatever you main element has.
    <footer><!-- ... --></footer>

You can then tac on these 4 declarations.

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

main {
    flex-grow: 1;

See the Pen Six Line Sticky Footer by Farai Gandiya (@faraixyz) on CodePen.

There’s the issue of 100vh being strange on iOS’s WebKit. There’s a fix for the 100vh bug, but the last time I tried it, it broke in Chrome instead.

CSS Tricks has an article which goes over various other ways to make a sticky footer if flexbox won’t work in your situation.

Flexbox is neat, isn’t it?