Fixed/Sticky Footer Template

Keep important links and information always in view with this compact fixed (or "sticky") footer.

This template creates a footer bar that always remains visible at the bottom of the browser window, ensuring important links are always accessible without needing to scroll to the end of the page. It's perfect for web applications or sites that need to provide persistent navigation or display critical information like a cookie notice.

Screenshot of a thin footer bar that is fixed to the bottom of the browser window.

Get Source Code Preview

About this Fixed Footer Template

A fixed or "sticky" footer is locked to the bottom of the viewport, remaining in a consistent, visible position as the user scrolls up or down the page. This template offers a clean and simple implementation of this pattern. It's designed to be unobtrusive while keeping important links readily accessible. The layout uses Flexbox to neatly arrange a copyright notice and a small set of navigation links.

Features

Persistent Visibility: The footer stays fixed to the bottom of the viewport using position: fixed.
Compact & Unobtrusive: A slim design ensures it doesn't take up too much valuable screen real estate.
Content Padding: The template includes a crucial CSS rule to add padding to the bottom of the body, preventing the fixed footer from overlapping and hiding the last bit of page content.
Clean & Modern: A simple, versatile design that can be easily styled to fit any website.
Responsive: The links and copyright text stack on small screens for readability.

Ideal Use Cases

Web applications or dashboards with persistent navigation.
Displaying a cookie consent or privacy notice bar.
Single-page applications (SPAs).
Websites with "infinite scroll" where a traditional footer would never be reached.

Code Breakdown

The key to this template is the CSS applied to the .footer-fixed element: position: fixed; bottom: 0; left: 0; width: 100%;. This removes the footer from the normal document flow and locks it to the bottom of the browser window.

A critical and often-forgotten part of implementing a fixed footer is accounting for the space it occupies. Without a countermeasure, the footer would obscure the content at the very bottom of the page. This template solves that by adding a padding-bottom to the body that is equal to (or greater than) the height of the footer. A CSS variable, --footer-height, is used to ensure these values stay in sync.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed/Sticky Footer</title>
    <style>
        :root {
            --footer-height: 60px; /* Define footer height as a variable */
            --footer-bg: #ffffff;
            --footer-text: #555555;
            --footer-border: #dddddd;
            --footer-link-hover: #000000;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            /* 
             * CRITICAL: Add padding to the bottom of the body.
             * This must be equal to or greater than the footer's height
             * to prevent the fixed footer from overlapping the page content.
            */
            padding-bottom: var(--footer-height); 
        }
        
        main {
            padding: 2rem;
        }

/* A lot of content to demonstrate scrolling */
        .long-content {
            height: 200vh;
        }

/* FOOTER STYLES START HERE */
        
        .footer-fixed {
            /* This is the core of the fixed footer */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--footer-height);

background-color: var(--footer-bg);
            border-top: 1px solid var(--footer-border);
            z-index: 1000; /* Ensure it's on top of other content */
            
            /* Use flexbox for alignment of content inside the footer */
            display: flex;
            align-items: center;
        }
        
        .footer-fixed__container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            
            display: flex;
            flex-direction: column; /* Mobile-first stack */
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .footer-fixed__copyright,
        .footer-fixed__nav {
            font-size: 0.875rem;
            color: var(--footer-text);
        }
        
        .footer-fixed__nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
        }

.footer-fixed__nav a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-fixed__nav a:hover {
            color: var(--footer-link-hover);
            text-decoration: underline;
        }

@media (min-width: 768px) {
            .footer-fixed__container {
                flex-direction: row; /* Side-by-side on larger screens */
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <h1>Fixed/Sticky Footer</h1>
        <p>This footer will remain at the bottom of the page as you scroll.</p>
        <p>Notice the padding at the bottom of the page that prevents this final paragraph from being hidden by the footer.</p>
        <div class="long-content">
             <p>...Scrolling content...</p>
        </div>
        <p>This is the last piece of content on the page.</p>
    </main>

<footer class="footer-fixed" role="contentinfo">
        <div class="footer-fixed__container">
            <p class="footer-fixed__copyright">&copy; 2025 Your App Name</p>
            <nav class="footer-fixed__nav" aria-label="Footer Navigation">
                <ul>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>

View Output