How To Keep Footer At Bottom Of Page Css

by

Ensuring that a footer stays at the bottom of the page, regardless of the content length, is a common challenge faced by web developers. With the advent of modern CSS techniques, it is now much easier to achieve than before. In this blog post, we will discuss a simple and effective method to keep the footer at the bottom of the page using CSS Flexbox.

Using CSS Flexbox

CSS Flexbox is a powerful layout module that allows you to easily distribute and align elements within a container. It is perfect for solving the sticky footer issue as it provides a clean and efficient solution that works across different browsers and screen sizes.

Here’s how to keep the footer at the bottom of the page using CSS Flexbox:

  1. Create a wrapper container that holds all the page content, including the header, main content, and footer.
  2. Set the wrapper container’s display property to ‘flex’ and its flex-direction property to ‘column’.
  3. Make sure the wrapper container’s min-height property is set to 100vh, which ensures it takes up the full viewport height.
  4. Set the flex-grow property of the main content container to 1, which will allow it to take up any available space within the wrapper container, effectively pushing the footer down to the bottom of the page.

Example Code:

Here’s an example of the HTML structure:




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


    <div class="wrapper">
        <header>
            <!-- Header content -->
        </header>
        <main>
            <!-- Main content -->
        </main>
        <footer>
            <!-- Footer content -->
        </footer>
    </div>

And the corresponding CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

header, main, footer {
    padding: 1rem;
}

With this simple implementation of CSS Flexbox, you can ensure that your footer stays at the bottom of the page, no matter the content length. This solution is both clean and efficient, working effectively across different browsers and screen sizes.

Conclusion

Keeping the footer at the bottom of a webpage has always been a common issue in web development. However, modern CSS techniques like Flexbox have made it much easier to achieve a clean and efficient solution. By following the steps outlined in this blog post, you can easily keep your footer at the bottom of the page, no matter the content length, using CSS Flexbox.