How to Position a Footer at the Bottom of a Page with a Fixed Header?

Positioning Footer at the Bottom of a Page with a Fixed Header

Understanding the Issue and Requirements:

You seek to position the footer at the absolute bottom of the page, even when there's a fixed header. This eliminates using position: fixed or having the footer at the bottom of the visible screen.

Ryan Fait's Sticky Footer Method:

We'll employ Ryan Fait's approach as it fulfills your specific conditions:

Steps:

1. Set HTML and Body Height to 100%: Define height: 100% for and to establish a 100% viewport height.
2. Give Content a 100% Minimum Height: Assign #content a min-height: 100% to ensure it takes up the entire viewport height.
3. Position Footer Absolutely and Offset Content: To position the footer below #content, give #content a negative margin-bottom equal to the footer's height. Then, position #footer absolutely to place it above #content.

4. Prevent Content from Overlapping Footer: Two options:

   • Spacer Element: Add a
   • Padding-Bottom and Box-Sizing: Use padding-bottom: 100px and box-sizing: border-box on #content (with proper vendor prefixes).

   Adding the Header:

   1. Header in Normal Flow: For a header in the normal flow, nest it within #content.
   2. Absolutely Positioned Header: To position the header absolutely, adjust #content's padding-top accordingly.

   Modern Approach with Box-Sizing:

   Modern browsers fully support box-sizing: border-box, which eliminates the need for spacer elements. However, using spacer elements remains suitable for wider browser compatibility.

   Conclusion:

   This approach provides a robust solution for positioning the footer at the bottom of the page with a fixed header, ensuring optimal display on all devices.