How Can I Create a Sticky Footer That Remains at the Bottom of the Page Regardless of Content Height?

Footer Positioning: Bottom of Page or Content, Adaptive to Height

Dynamic Content, Fluid Footer Placement

In web design, it's often desirable to ensure that the footer stays at the bottom of the page or browser window, regardless of content length. This can be achieved with the following:

Flexbox Solution

With Flexbox, creating sticky footers is straightforward:

1. Define a flex container (e.g., #main-wrapper) with flex-direction set to column.
2. Set the flex-container's min-height to 100% to ensure it spans the entire page height.
3. Add a child element to the flex container with a flex value greater than 0 (e.g., article { flex: 1; }). This helps expand the element vertically and push the footer towards the bottom.

CSS Code:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

The above is the detailed content of How Can I Create a Sticky Footer That Remains at the Bottom of the Page Regardless of Content Height?. For more information, please follow other related articles on the PHP Chinese website!