How to Create a Sticky Footer with a Fixed Header?

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

When creating web pages, you may encounter the challenge of positioning the footer at the bottom of the page while maintaining a fixed header. This ensures that the footer remains visible regardless of page content. Let's delve into the details of achieving this effect.

Utilizing position: fixed for the header allows it to remain stationary on the screen when scrolling, but it does not automatically position the footer at the bottom of the page. Instead, the footer would remain at the same vertical position as defined by its top property.

To fix this, we need to position the footer relatively to the page content, rather than the viewport. This ensures that the footer will always be positioned at the bottom of the page, regardless of the amount of content on the page.

Ryan Fait's Sticky Footer Method

One well-established approach for creating a sticky footer is the method proposed by Ryan Fait. This method is applicable when both the header and footer have fixed heights.

Steps:

1. Set the height of the and elements to 100%, ensuring the next step functions correctly.
2. Give the main content container (#content) a minimum height of 100%. This will push the footer to the bottom of the page.
3. To prevent the content from overflowing behind the footer, provide the #content element with a negative margin-bottom equivalent to the footer's height.
4. Position the footer relatively to the content container (#content) using position: relative to ensure it appears on top of the content.
5. Add a spacer element at the end of the #content element or utilize a combination of padding-bottom and box-sizing: border-box to compensate for the footer's height. This prevents the content from overlapping with the footer when the content area grows.

Adding a Header

1. If the header should remain in the normal flow, simply add it to the #content element.
2. If the header should be positioned absolutely, push the #content element downwards to prevent overlap. This can be achieved using a spacer element at the beginning of #content or by utilizing padding-top and box-sizing: border-box.

It's important to note that while most modern browsers support box-sizing: border-box, using spacer elements provides wider browser compatibility.

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