How to Create a Sticky Footer Using CSS

Introduction

A sticky footer stays at the bottom of the page, no matter how much or how little content there is. It ensures the footer always appears at the bottom of the browser window if the content is short. If the content is long, the footer will follow after the content.

In this tutorial, you'll learn how to create a sticky footer using simple CSS methods - Flexbox and CSS Grid.

Method 1: Using Flexbox

Flexbox is an easy way to create a sticky footer. It allows the footer to stay at the bottom of the page when the content is short.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Footer with Flexbox</title>
    <style>
        /* Flexbox layout for the body */
        body {
            display: flex;
            flex-direction: column; /* Stacks content vertically */
            min-height: 100vh; /* Full viewport height */
            margin: 0;
        }

        /* Content area */
        .content {
            flex: 1; /* Expands to fill available space */
            padding: 20px;
            background-color: #f0f0f0;
        }

        /* Footer styles */
        footer {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <header>
        <h1>Header Area</h1>
    </header>

    <div class="content">
        <p>This is the main content area. If there's not much content here, the footer will stick to the bottom of the page.</p>
    </div>

    <footer>
        <p>Sticky Footer</p>
    </footer>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

display: flex; flex-direction: column;: Sets the body as a flex container and stacks content vertically.
min-height: 100vh;: Ensures the body takes up the full height of the browser window.
flex: 1;: Makes the content section expand to fill the space between the header and footer. This keeps the footer at the bottom.

Method 2: Using CSS Grid

CSS Grid is another easy way to make a sticky footer. It works well for layouts with rows and columns.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Footer with CSS Grid</title>
    <style>
        /* Grid layout for the body */
        body {
            display: grid;
            grid-template-rows: auto 1fr auto; /* Header, content, and footer */
            min-height: 100vh;
            margin: 0;
        }

        /* Content area */
        .content {
            padding: 20px;
            background-color: #f0f0f0;
        }

        /* Footer styles */
        footer {
            background-color: #e74c3c;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <header>
        <h1>Header Area</h1>
    </header>

    <div class="content">
        <p>This is the main content area. The footer will always stay at the bottom of the page.</p>
    </div>

    <footer>
        <p>Sticky Footer with CSS Grid</p>
    </footer>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

display: grid; grid-template-rows: auto 1fr auto;: Defines three rows: one for the header, one for the content, and one for the footer.
min-height: 100vh;: Ensures the body takes up the full height of the browser window.
1fr for the content: Makes the content section grow to fill the space, pushing the footer down to the bottom.

Conclusion

Creating a sticky footer is simple with CSS. Using Flexbox or CSS Grid, you can ensure that the footer stays at the bottom of the page, even when the content is short. Both methods are modern and easy to implement. Choose the one that best fits your layout!

Java Guides

Search This Blog