how to fix footer at bottom of page with css

The Setup

First, we'll take a look at the setup HTML. Here's some minimal HTML:

          <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
            <body>
            <div class="main">{{ INSERT PAGE CONTENT HERE }}</div>
            <footer>{{ INSERT FOOTER CONTENT HERE }}</footer>
            </body>
</html>

There's not much special here besides a meta viewport tag. This tag is super standard, and should be an auto-include in your html pages anyway. The reason why we need it here, though, is because we'll be using vh units, which rely on the viewport.

One of the reasons why this method is so powerful is that your HTML stays semantic, with no intrusive wrappers or extra elements.

Another reason why it's so powerful, though, is because it's extensible. Maybe you're doing a two tiered footer design — don't worry! just stick another footer after the first, It'll be pushed down to the bottom too.

You're also free to style your main and footer the way you'd like. We're only adding a handful of styles, so it's really non-intrusive in your stylesheet either.

The styles

First, we need to do some basic boilerplate for this to be visible. All I'm doing is adding a background color to both the footer, and the main.

This is what we should look like at this step.

Now, we can easily tell exactly what space an element is taking up. We also need to do some boilerplate styles:

          body {
            min-height: 100vh;                      margin: 0;
            padding: 0;
}

The first part is a bit of magic: we tell HTML that if the body is not taking up the full screen, then we need to make it take up the full screen! That's so that we don't have the footer float up to the middle of the page if we don't have a lot of content. It also says, though, that if we do have a lot of content, we should let it grow to its size — in that case, the footer is already glued to the bottom, as the content itself is pushing it down.

The rest super standard, and I'm pretty sure if you're a front-end developer, you already do this. It just takes away some ugly styling that is default on all browsers. Why is it default? I have no idea, but we want it gone.

This isn't mandatory, but it'll make your layout look far more crisp by not having white around the edges of your footer, and your pixels will be exactly lined up to the edges of the screen.

The Secret Sauce

The next step, then, is where the secret sauce happens: flexbox.

We need to make the whole screen a flexbox, so that the children can use some amazing flexbox properties.

If you don't know what flexbox is, good news and bad news: the good news is that you don't need to know anything about it for this. The bad news is that you're missing one of the greatest tools for a front-end developer, and that you now have plans this weekend :).

We need to add two styles to the body tag:

          body {
            /* what we already have */
            min-height: 100vh;
            margin: 0;
            padding: 0;                      /* what we're adding */
            display: flex;
            flex-direction: column;
}

these two styles will tell the body that it's a flexbox, and it should perform it's flexie actions vertically. That's convenient, because we need to perform some flexie actions vertically!

Specifically, we're going to need to need to perform a flex-grow. Here's the remaining styles this is the only remaining style for this!)

          .main {
            flex-grow: 1;
}

Now, if we look at our now very tall page, we should see:

Hey! The footer is all the way down here!

What we just told the .main to do is grow as tall as possible, after the footer takes it's natural space. This means that the footer is as big as it needs to be, and the body content grows as to fill the remaining space.