How to create a fixed/sticky footer with CSS?
The fixed/stick footer is a footer that is fixed at the bottom of the browser. The position of the footer does not change even when the contents on the webpage are too short. In this tutorial, we will be learning about the CSS properties to create fixed/sticky footers.
position: fixed
The position:fixed property is used to position the element relative to the viewport, which means the element remains in the same place even when the page is scrolled. To footer is positioned to the bottom using CSS bottom property and it is fixed using position: fixed property.
Example: Create a fixed footer
Here in this program, we have created a fixed footer using position: fixed property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #CCCCCC;
color: black;
text-align: center;
}
h2,
p {
text-align: center;
}
</style>
</head>
<body>
<h2> Sticky Footer</h2>
<p> Here we have created a sticky footer </p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Create a sticky footer
Let's adding long content to the webpage and see how the sticky footer works after scrolling.
Conclusion
In this tutorial, we have learned to create a sticky/fixed footer using CSS properties. The sticky footer remains fixed at the bottom of the webpage and does not change the position on contents length.
