DEV Community

Farai Gandiya
Farai Gandiya

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

Sticky Footer Using Flexbox With Just 4 CSS Declarations

#css #flexbox

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:

Top comments (0)

Read next

bogdanfromkyiv profile image

7 Old-School Practices in HTML Should Be Avoided

Bogdan Bendziukov -

tomasdevs profile image

Make Your CSS Better with SCSS Mixins and Functions

Tomas Stveracek -

tailwine profile image

CSS Flexbox: Creating a Sticky Sidebar

Tailwine -

ridoy_hasan profile image

Best Practices for Writing CSS – Clean, Scalable, and Maintainable Code

Ridoy Hasan -