Footers might sit at the bottom of the page, but they’re still an important part of your layout. The tricky part? Making sure they stay at the bottom, even when there’s not much content on the page. Luckily, modern CSS gives us a couple of easy ways to pull this off. Let’s look at two simple approaches.
Footer at the bottom of the page, but not fixed
The first approach will show how to make the footer for a given page stay at the bottom of the viewport as long as the content is smaller than the viewport height. When the content exceeds the height of the viewport, the footer behaves like a regular footer, getting pushed down and staying below the content.
The HTML will look something like this:
<body>
<header><h2>Header</h2></header>
<main>
<p>Content goes here...</p>
</main>
<footer><h2>Sticky Footer</h2></footer>
</body>
Code language: HTML, XML (xml)Notice this uses the <body> element as the wrapper. If you prefer, you can use an actual wrapper element, but this would require some extra HTML.
The CSS then looks like this:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
main {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Code language: CSS (css)The key portions of the CSS are the flex-direction, and flex-grow declarations. The flex-shrink declaration is set to zero, but this probably isn’t required in most cases. Below is an interactive demo. Use the buttons to add or remove extra paragraphs to test the ‘stickiness’ of the footer.
👉 Use this method when you want a “smart” footer that stays put without getting in the way.
Fixed footer
If you want a full sticky footer effect, use position:fixed to set the footer in place. But note that you also have to take into account the area the footer covers by adding some padding to the bottom of the main content area above the footer. Here’s the CSS:
footer {
position: fixed;
width: 100%;
bottom: 0;
box-sizing: border-box;
}
main {
padding-bottom: 140px;
}
Code language: CSS (css)Demo is below:
👉 This approach is best when the footer has links or actions you want users to see at all times.
