How to make a footer stick to the bottom with CSS in 3 ways

Lately I've been working on one of my personal side projects and starting to get into web development again. While designing the overall layout of the site I ran into the problem of keeping the footer to the bottom of the webpage while being still responsive. During my research on how to do this, I found the following solutions:

Absolute position

The first solution I found was by using absolute positioning on the footer. If you try out the solutions above you will notice that the footer will stick to bottom of page and resizes according to its content. But, if there is too much content inside of the footer, it will cause an overlap with main content and hide crucial elements.

Fixed height footer

Next, I found solutions which required the footer to have a fixed height. When you use this method, the footer will not overlap with the main content of the page, but you have to manually tweak the height every time you add another link to you footer which can be cumbersome.

Flex box

Last but not least, using flex box we can set the footer at bottom of page but not fixed. This is helpful if the content of the footer is generated by querying a database, for example.

index.html

styles.css

script.js 

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

#main {
    flex: 1;
}

These CSS rules are all we need to make the footer stay at the bottom. Here we telling the browser to make the <body> of the page as tall as the browser itself and to use the flex layout model to layout the children of the <body> element. Typically children are layed out horizontally if an element uses the flex layout. That means that all children inside the <body> would be put on the same row so to say. Therefore we have to instruct the flex layout model to layout the children vertically. We can achieve this by using flex-direction: column;.

Unfortunately, this won't make the footer stay at the bottom. In order to achieve this, we have to tell the main block of our site to grow in such a way that the height of the enclosing <body> element is used to its full extent. This can be done by using the flex: 1 directive on the main part of your site which is a shorthand for flex: 1 1 0 [CSS flex box specification]. If you read the flex layout specification we are saying that the given flex item (a child of parent element with display: flex) should grow into the negative space (unused space) of the enclosing element.

You may ask yourself, what are the footers flex properties ? The default value of flex is flex: 0 1 auto which tells the flex item to shrink as small as it can without hiding any of its content. This is the reason why using display: flex; on the parent alone will not yield a footer which should stick to the bottom.

If you need to support very old browsers or Internet Explorer in general, you are better suited with one of the solutions earlier solutions: CSS Flexible Box Layout Module on caniuse.com

I hope this simple explanation will help you by your next web project.

Be the first to know when I post cool stuff. Woof!

@
To confirm your subscription, click the link in the email I will send you. Also check your SPAM folder!
© 2021 Martin Schleiss | Imprint