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

Fixing Footer at Page Bottom in HTML

In your HTML code, you specified a class named "footer" with a background color and relative positioning. However, the footer doesn't fully span the page width, leaving whitespace below it.

To address this issue and make the footer fixed at the page bottom, you can use the following CSS code:

.footer {
  color: #fff;
  clear: both;
  margin: 0;
  padding: 0.75em;
  background: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #000;
}

This code applies the following modifications:

• Fixed Positioning: position: fixed and bottom: 0 fix the footer at the bottom of the page.
• Full Width: left: 0 and right: 0 ensure the footer spans the entire page width.
• No White Space: Removing the margins and padding prevents any whitespace from appearing below the footer.

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