How to Create a Sticky Footer That Remains at the Bottom of the Page or Content, Whichever is Lower?

Footer Positioned at the Bottom of Page or Content, Whichever is Lower

When the height of dynamically loaded content in the

section varies, it can create a perplexing issue: how can the

section stay at the bottom of the visible content while also conforming to the browser window's lower boundary?

Flexbox Version

For those with the advantage of using flexbox, achieving this sticky footer is a piece of cake. By enclosing all elements in a flex container with a height-stretching wrapper, the footer can effortlessly adapt to dynamic content.

Simply configure the wrapper element with display: flex and flex-direction: column. Then, assign at least one sibling element with a flex value exceeding 0, such as:

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

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

article {
  flex: 1;
}

Html Markup:

<div>

This approach effectively glues the footer to the bottom of the browser window when content is short, and dynamically adjusts its position to match the height of longer content.

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