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
- Stackoverflow: CSS to make HTML page footer stay at bottom of the page with a minimum height
- Sticky 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.
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.