WebDew

How to Make a Sticky Footer with Flexbox CSS3

Sticky Footer

The broken layout happens when the page doesn’t have enough content to push a footer to the bottom of screen, leaving an enormous area of a whitespace below it. Obviously, we want to have a sticky footer that is guaranteed to stick to the bottom of the webpage.

In this tutorial we’re going to learn the most modern technique for building sticky footers.

Let’s make a Sticky Footer

Probably, flexbox is the most advanced CSS3 tool allows us to build adaptive layouts, so we will use it for building our layout.

Consider that our web layout has a header, main part, and a footer. In this HTML snippet you can examine our website structure:

<body>
 <header>...</header>
 <main>...</main>
 <footer>...</footer>
</body>

Pretty simple, right? Okay, now it’s time to add some CSS. To enable flex model we need to add display:flex to the body, and change the direction to the column. Also, the html and body must have 100% height to fill up the whole screen.

Note: default flex-direction is set to row which is a horizontal layout.

html, body
{
    height: 100%;
}

body
{
    display: flex;
    flex-direction: column;
}

As we want everything to work properly, we need to adjust how much space each section will take up. We will use the flex property which simply combines together three flex-options into one:

In our particular situation, we want our header and footer to take up as much space as they need, and the main part will take everything else in-between them.

header
{
	flex: 0 0 auto; /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
}

main
{
	/* With flex-grow set to 1, the main part will take up all free space */
	flex: 1 0 auto; /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
}

footer
{
	flex: 0 0 auto; /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
}

Congratulations! With this CSS code we’ve just made a sticky footer which will be always at the bottom of the page.

Conclusion

As we mentioned, flexbox is a really powerful tool for building web layouts. The vast of modern web browser support it; therefore, it is mostly safe to use it – Can I Use Flexbox.

Hope this tutorial was helpful for you!

0 Comments

Leave a Reply