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>
You can then tac on these 4 declarations.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
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:
- sharing my work,
- refering me for a job (or hire me for freelance work),
- sponsoring me on Patreon,
- buying Me A Coffee,
- buying Me A Ko-Fi,
- sending me a tip on Paypal,
-
buy something on Amazon with my affiliate link (I’ll earn a commision on this as an amazon affiliate), - or buy a domain on Namecheap with my affiliate link.
Top comments (0)