Creating a Sticky Footer

A "sticky" footer is a footer that remains glued to the bottom of the browser window at all times, no matter how far up or down the page the user scrolls. You can achieve this easily using the CSS position property.

This layout technique is perfect for persistent app-like navigation bars, chat widgets, or constant "sign up" banners.

Using Position Sticky

To make an element sticky, you simply grant it position: sticky. However, a position of sticky won't do anything by itself. You also have to tell the browser where you want it to stick.

Because we want a sticky footer, we tell it to stick to the bottom of the screen, specifically at exactly 0 pixels away from the edge:

Tip: `position: fixed` vs `position: sticky`

While position: fixed will permanently glue the footer to the bottom of the screen from the moment the page loads, position: sticky allows the footer to behave like a normal element inside the document until the scrolling viewport actually collides with it. At that point of contact, it "sticks" to the window.

Full Working Example

Below is a demonstration of a sticky footer. A large height has been applied to the content area so that the page is scrollable. Try scrolling down through the preview pane and watch how the footer remains permanently anchored to the bottom:

<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f8f9fa;
  }
  
  .content {
    /* Lots of padding to simulate a long page of content */
    padding: 20px;
    padding-bottom: 200px; /* Extra space so we can scroll past */
    height: 1500px; /* Force page to be scrollable */
  }

.sticky-footer {
    background-color: #343a40;
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-weight: bold;
    
    /* The CSS Sticky Magic */
    position: sticky;
    bottom: 0;
    
    /* Ensure it sits above scrolling content */
    z-index: 100;
  }
</style>
</head>
<body>

<div class="content">
  <h2>Sticky Footer Demo</h2>
  <p>This page is very tall so you can scroll down.</p>
  <p>Notice how the dark footer below is "stuck" to the bottom edge of your screen, no matter how far up you are currently scrolled!</p>
</div>

<footer class="sticky-footer">
  I am a Sticky Footer!
</footer>

</body>
</html>

View Output Full Screen Preview

Creating a Sticky Footer

Using Position Sticky

Tip: position: fixed vs position: sticky

Full Working Example

Tip: `position: fixed` vs `position: sticky`