Breakdance4fun Logo

How to keep the Footer always at the bottom

This CSS code will ensure that your footer stays at the bottom of the page, regardless of the size of the content.

Which is different than a Sticky footer. Sticky means that the footer will be at the bottom but always visible, on top of the content.

html,
body {
height: 100%;
}

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

footer {
margin-top: auto;
}

Be sure to choose footer as the tag for your section in your footer template:

section-footer-tag