Home >Web Front-end >CSS Tutorial >How Can I Create a Sticky Footer That Remains at the Bottom of the Page Regardless of Content Height?

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

Linda Hamilton
Linda HamiltonOriginal
2024-12-23 09:00:361026browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn