How Can I Fix My Footer to the Bottom of the Page Regardless of Content Height?

Fixing Footer to Bottom of Page

In your attempt to keep the footer fixed at the bottom of your web page, you have tried various methods, such as "bottom:0px" and "position:absolute," without satisfactory results. Here's a solution to ensure your footer stays at the bottom of the page regardless of screen size:

1. Modify Footer CSS:

#footer {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0;
    height: [desired height of footer, e.g., 50px];
    margin-bottom: 0;
}

2. Add Margin to Body:

To prevent the footer from overlapping with the page content, add a margin to the body:

body {
    margin-bottom: [same height as footer, e.g., 50px];
}

This ensures that the page remains scrollable, even with the fixed footer. Adjust the height values in the CSS code to suit your requirements.

Example Code:

<div>

#footer {
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin-bottom: 0px;
}

body {
  margin-bottom: 50px;
}

This code fixes the footer to the bottom of the page, ensuring it's visible even with limited content.

The above is the detailed content of How Can I Fix My Footer to the Bottom of the Page Regardless of Content Height?. For more information, please follow other related articles on the PHP Chinese website!