How to Create a Sticky Footer in HTML?

How to Ensure Footers are Fixed to Page Bottoms

In HTML pages, it is often desirable to have a fixed footer that remains at the bottom of the page, regardless of content length. However, sometimes, styling issues can prevent footer elements from occupying the full page width or leaving white space below them.

To address this issue, a popular solution is the "sticky footer" technique. This method involves creating a wrapper element that contains the body content and a push element of the same height as the footer.

By setting the wrapper's bottom margin to a negative value equivalent to the footer's height, the push element is pushed down to the bottom of the page. This forces the footer to stick to the bottom edge, regardless of page length.

To illustrate, consider the following CSS code:

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

HTML structure:

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

By implementing this sticky footer approach, you can ensure that your footer elements remain fixed at the bottom of the page, filling the entire page width and eliminating unwanted white space.

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