Css Html Footer Sticky Footer

How to Get Your Footer to Stay at the Bottom of a Web Page

Creating a web page that maintains its structure across different browsers can sometimes be a challenge. One common issue that many developers face is ensuring that the footer remains at the bottom of the page, regardless of the content height. If you’re struggling with this problem, you’ve come to the right place. In this post, we’ll go through a simple approach to achieve a sticky footer that stays anchored to the bottom of your page.

When designing a simple layout with two columns, you may encounter a situation where your footer does not behave as expected. It’s not unusual for the footer to float awkwardly in the middle of the page when there’s not enough content to push it down. In contrast, when there is ample content, it works as intended – that’s why finding a temporary fix or workaround can be frustrating.

Having a footer that sticks to the bottom enhances user experience by:

  • Providing easy access to important links.
  • Improving overall aesthetics.
  • Ensuring consistency across various screen sizes and devices.

To ensure your footer stays anchored at the bottom of the page, we’ll utilize a simple CSS and HTML combination. Let’s break down the necessary steps to achieve this.

Step-by-Step Guide

  1. Wrap Your Content
    First, you need to create a <div> for your main content. Assign it a class called wrapper.

    <div class="wrapper">
    <!-- Your content goes here -->

  2. Add a Push Div
    Right before the closing </div> tag of the wrapper, insert an empty <div> with the class push. This element will ensure the footer’s height is accounted for.

    <div class="push"></div>
</div> <!-- End of wrapper -->

  3. Insert the Footer
    Now, after the wrapper’s closing tag, create the footer <div> and assign it a class called footer.

    <div class="footer">
    <!-- Footer content goes here -->
</div>

Complete HTML Structure

Your HTML should look something like this now:

<div class="wrapper">
    <!-- Your content here -->
    <div class="push"></div>
</div>
<div class="footer">
    <!-- Footer content here -->
</div>

Required CSS Styles

To ensure that your layout behaves correctly, apply the following CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* The bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must match the height of .footer */
}

Final Thoughts

With the steps outlined above, you should now have a functional sticky footer that enhances your website’s usability. This setup ensures that as your content adjusts, your footer behaves predictably across different browsers.

Remember, always test your design in multiple browsers to guarantee consistent behavior. By implementing this solution, you can prevent any unwanted layout issues and present your visitors with a polished, professional appearance.

If you enjoyed this guide or have questions, feel free to leave a comment below! Happy coding!