How Can I Create a Sticky Footer Using Only CSS?

Positioning Footers with CSS Mastery

Enhancing the user experience of your website often involves creating elements that remain visible even as users scroll through the page. Sticky footers, which remain fixed at the bottom of the page, are an effective way to accomplish this. While there are various methods to achieve this effect, pure CSS provides a straightforward and efficient solution.

For WordPress users, adhering to the following steps will ensure that their footers remain firmly anchored at the bottom of the page:

1. Configure HTML for Footer Placement:

   
   <div>
   <ul>
   <li>Use the <main-content> div to host the primary content of the page.</main-content>
   </li>
   <li>The <footer> element, with an ID of bottom-footer, will serve as the anchor for the sticky footer.</footer>
   </li>
   </ul>
   <li>
   <p><strong>Adjust Body Margins:</strong></p>
   <pre class="brush:php;toolbar:false">body {
       margin-bottom: 100px; /* Margin value should match the height of the footer */
   }

   • This margin will create space at the bottom of the page where the footer will be positioned.

2. Apply CSS to Position Footer Absolutely:

   #bottom-footer {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
   }

   • position: absolute allows the footer to be placed independently of the main content.
   • bottom: 0 ensures that the footer is aligned to the bottom edge.
   • left: 0 anchors the footer to the left margin.
   • width: 100% ensures that the footer occupies the entire width of the page.

By following these steps, you can create a sticky footer using pure CSS without the need for plugins or complex JavaScript. This approach offers a lightweight and efficient solution that enhances user convenience and makes your website more visually appealing.