How Can I Keep a Footer at the Bottom of the Page Regardless of Content Height?

Footer at Bottom of Page or Content

Problem:

Dynamically loaded content within an

can vary in height. The goal is to position the

at the bottom of the page when the content is extensive, or at the bottom of the browser window when it's limited.

Answer:

Flexbox Version:

For browsers supporting Flexbox, a simple solution is to use the display: flex property together with a height of 100% for the wrapper element (#main-wrapper). This ensures that the wrapper stretches to fill the entire viewport.

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

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

Within the wrapper, the

should have a flex value of 1, which allows it to expand vertically. This ensures that the

will always be pushed to the bottom of the page or the bottom of the content, depending on which is larger.

article {
  flex: 1;
}

Revised HTML:

<div>

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