DEV Community

Farai Gandiya
Farai Gandiya

Posted on • Originally published at codelab.farai.xyz on

2 2

Sticky Footer Using Flexbox With Just 4 CSS Declarations

Sticky Footer Using Flexbox With Just 4 CSS Declarations was first published on Farai's Codelab.


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:

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

Enter fullscreen mode Exit fullscreen mode

You can then tac on these 4 declarations.

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

main {
    flex-grow: 1;
}

Enter fullscreen mode Exit fullscreen mode

Here's an example:

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?


Thanks for reading! If you liked this post, consider supporting my work by:

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)