How to Create a Fixed Footer at the Bottom of a Page in HTML?

Creating a Fixed Footer at the Page Bottom

In HTML, a footer is typically represented by a div class named "footer." To fix this element at the bottom of the page, certain CSS properties need to be implemented.

The provided CSS code positions the footer relatively with a top value of 490px, which is not suitable for fixing the footer to the bottom. Additionally, the code does not specify a width property, which results in the footer not filling the page width.

To create a fixed footer, a combination of CSS properties can be used. One common approach is to utilize the "sticky footer" technique. Here's how it can be implemented:

/* Sticky Footer by Ryan Fait */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.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 */
}

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

By using this technique, the footer element will remain fixed at the bottom of the page, even as the page content adjusts in height.

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