How to Create a Sticky Footer Using CSS Flexbox?

Last Updated : 29 Jul, 2024

Creating a sticky footer using CSS Flexbox ensures that the footer remains at the bottom of the viewport or the content and provide a consistent layout experience. In this article we will cover approach to create a sticky footer using CSS Flexbox.

Approach

Set the html and body elements to 100% height and remove default margins.
Style the body to be a flex container with a column direction to allow easy management of the header, main content, and footer.
Create a .container div to hold the header, main content, and footer.
Set the container to flex: 1 to expand and take up available space, and add padding at the bottom to prevent content from being hidden behind the footer.
Style the footer to be positioned fixed at the bottom of the viewport using position: fixed.

Example: In below example we have created sticky footer which remain sticky even if we scroll down.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Sticky Footer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>Course Offerings</h1>
        </header>
        <main>
            <h2>Hello, What Do You Want To Learn?</h2>
            <div class="card">
                <h2>DSA Self-Paced</h2>
                <p>Learn Data Structures and Algorithms at
                    your own pace with our comprehensive course.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="card">
                <h2>JavaScript Fundamentals</h2>
                <p>Master the fundamentals of JavaScript,
                    the language of the web.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="card">
                <h2>React MERN Stack</h2>
                <p>Become proficient in building full-stack
                    applications with the MERN stack
                    (MongoDB, Express, React,
                    Node.js).</p>
                <a href="#">Learn More</a>
            </div>
        </main>
        <footer>
            <p>@GeeksforGeeks, Sanchhaya Education
                Private Limited, All rights reserved
            </p>
        </footer>
    </div>
</body>

</html>

CSS

html,
body {
    height: 100vh;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Main container to hold header,
// main content, and footer */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;
}

header {
    background-color: #f1f1f1;
    padding: 1rem;
    text-align: center;
}

main {
    flex: 1;
    padding: 1rem;
    min-height: 100vh;
  
}

.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h2 {
    margin-top: 0;
}

.card p {
    margin: 0.5rem 0;
}

.card a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    color: white;
    background-color: #007bff;
    text-decoration: none;
    border-radius: 5px;
}

.card a:hover {
    background-color: #0056b3;
}

/* Footer styling */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(123, 196, 123);
    color: white;
    text-align: center;
    padding: 1rem;
}