Creating a sticky footer with CSS can be useful when you want to keep the footer at the bottom of the viewport even when the content of the page is not enough to fill the entire screen. In this tutorial, we’ll show you how to create a sticky footer using CSS.
1. Setting up the HTML structure
First, we need to create the HTML structure for our sticky footer. We’ll create a container element that will wrap the entire content of the page. Inside the container, we’ll add a main element that will contain the main content of the page. We’ll also add a footer element that will contain the footer content.
<body>
<div class="container">
<main>
<!-- main content here -->
</main>
<footer>
<!-- footer content here -->
</footer>
</div>
</body>
2. Adding styles to the container and main elements
Next, we’ll add some basic styles to the container and main elements to position them on the page.
html, body {
height: 100%;
}.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
In this code, we’re setting the height of the html and body elements to 100% to make sure the container takes up the full height of the viewport. We’re also setting the min-height of the container to 100% to ensure that the footer always stays at the bottom of the viewport.
The display property is set to flex, and the flex-direction property is set to column, to position the footer at the bottom of the container. Finally, we’re setting the flex-grow property of the main element to 1, so it takes up all the available space in the container.
3. Adding styles to the footer element
Now, we need to add styles to the footer element to make it sticky. We’ll set the position property to absolute and the bottom property to 0 to position the footer at the bottom of the container. We’ll also set the width property to 100% to ensure that the footer takes up the full width of the container.
footer {
position: absolute;
bottom: 0;
width: 100%;
}
4. Adding padding to the main element
Finally, we need to add padding to the main element to ensure that the content of the page does not overlap with the footer. We’ll set the padding-bottom property to the height of the footer to create the necessary space.
main {
flex-grow: 1;
padding-bottom: 100px; /* height of footer */
}
In this code, we’re setting the padding-bottom property to 100px, which is the height of the footer. You can adjust this value to suit your needs.
Bonus: Adding a background color to the footer
If you want to add a background color to the footer, you’ll need to add it to the container element as well. This is because the container element is set to 100% height, and the footer is positioned absolutely inside the container.
.container {
min-height: 100%;
display: flex;
flex-direction: column;
background-color: #f9f9f9;
}footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color: #fff;
}
In this code, we’re adding a background color to the container and the footer elements. We’re also setting the text color of the footer to white to ensure that it is visible against