Signup/Sign In
LAST UPDATED: AUGUST 5, 2021

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.

sticky footer

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.



About the author: