How to Make a Footer Stick at the Bottom of a Page

Introduction

In web development, ensuring that a footer stays at the bottom of the page, regardless of page content height, is a common requirement. This can be achieved using various techniques, including CSS. This article will guide you through both traditional and modern approaches to creating a page-specific footer that sticks at the bottom of the page.

Traditional CSS Approach

One traditional method of accomplishing a sticky footer involves using CSS positioning techniques, specifically the position: fixed property. Here is an example of how you can implement it:

Example CSS

.footer {
  position: fixed;
  padding: 10px 10px 0px 10px;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: grey;
}

Example HTML Structure

html
  head
    style
      .footer {
        position: fixed;
        padding: 10px 10px 0px 10px;
        bottom: 0;
        width: 100%;
        height: 40px;
        background: grey;
      }
    /style
  /head
  body
    div
      h1Content Here/h1
      pLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non urna felis. Sed dictum enim a nulla varius, at cursus neque sollicitudin. Maecenas blandit eros vitae lectus vehicula, id sagittis nisi lacinia./p
    /div
    footer
      divThis stays at the bottom of the page./div
    /footer
  /body
/html

WordPress and CSS

For users working within WordPress, creating a footer that sticks at the bottom can be streamlined. By customizing your theme or using a plugin like Elementor, you can easily position your footer. Here's how:

Steps in WordPress

Log in to your WordPress dashboard. Navigate to Customize Appearance. Check if you can add a footer under Footer Bottom Bar. If available, choose the Copyright Area selection. Select a footer design or create one using a page builder like Elementor.

Custom CSS for WordPress

If you prefer to tweak your footer through custom CSS, you can add it within the Appearance Customize Additional CSS section or directly in the theme's stylesheet.

Example CSS for WordPress

.footer {
  position: fixed;
  padding: 10px 10px 0px 10px;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: grey;
}

Conclusion

By utilizing CSS techniques, you can create a footer that sticks at the bottom of your webpage, enhancing the user experience and ensuring consistency across different page lengths. Whether you're working with a static HTML page or a WordPress site, the methods described in this article will help you achieve a professional and user-friendly footer layout.