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

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

Problem:

You want to place the footer at the very bottom of the page, below all other content, and have it remain in place when scrolling, without sticking to the screen like a fixed position would.

Solution:

Ryan Fait's Method

This approach is suitable for scenarios where both the header and footer have fixed heights. It involves:

1. Setting the height of and to 100% to ensure that the next step works.
2. Giving the
   containing the page content (#content) a minimum height of 100%.
3. Pulling the footer up by applying a negative margin-bottom to the #content equal to the footer's height and setting its position to relative.
4. Adding a spacer element at the end of the #content or using a combination of padding-bottom and box-sizing: border-box to prevent content from hiding behind the footer.

Adding the Header

To include a header while maintaining the footer's position:

1. Add the header to the #content if it should stay in normal flow.
2. If the header requires absolute positioning, add spacers or use padding-top and box-sizing: border-box to prevent content overlap.

Considerations:

• Modern browsers support box-sizing: border-box, but if broader support is required, use spacers.
• Ensure that the header and footer heights are fixed for this method to work.

The above is the detailed content of How to Keep a Footer at the Bottom of the Page with a Fixed Header?. For more information, please follow other related articles on the PHP Chinese website!