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

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

In order to position a footer at the bottom of a page, while also having a fixed header, it is necessary to adopt an approach that does not rely on "position: fixed," which would place the footer relative to the viewport instead of the page itself.

Leveraging Ryan Fait's Method

Ryan Fait's approach is straightforward and effective for scenarios where both the header and footer are of fixed heights:

1. Set the height of both and elements to 100%.
2. Give the #content element a minimum height of 100% to push the #footer down the page.
3. Use a negative margin-bottom on #content to pull the footer to the bottom.
4. Adjust the positioning of the footer relative to #content to ensure it appears on top.
5. Add a spacer or employ padding-bottom and box-sizing on #content to manage excess content and prevent it from overlapping with the footer.

Incorporating the Header

If the header should remain in its normal flow, simply add it within #content. To position it absolutely, you may use a spacer or the combination of padding-top and box-sizing.

Compatible Browsers and Alternatives

Modern browsers support box-sizing: border-box. For wider browser support, consider using spacer elements instead.

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