CSS

CSS Sticky Footer

Bits & Pieces

A sticky footer in web development typically refers to a footer that stays at the bottom of the page, even if the content on the page is not enough to fill the entire viewport. Achieving a sticky footer using CSS can be done in various ways. Here’s a simple example using Flexbox:

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

        .content {
            flex: 1;
            /* Add your content styles here */
            padding: 20px;
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: sticky;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- Your page content goes here -->
        <h1>Your Content Goes Here</h1>
        <p>More content...</p>
    </div>

    <div class="footer">
        <!-- Your footer content goes here -->
        <p>&copy; 2023 Your Website</p>
    </div>
</body>
</html>

In this example:

  1. The body element is set to display: flex; flex-direction: column; to create a flex container with a column layout.
  2. The .content class is set to flex: 1; to make it take up the available space and push the footer to the bottom.
  3. The .footer class has position: sticky; bottom: 0;, which makes it stick to the bottom of the viewport.

This is just one way to create a sticky footer, and there are other methods like using position: absolute;, position: fixed;, or using CSS Grid. Choose the method that best fits your layout requirements.

You May Also Like

CSS sticky header

Bits & Pieces