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

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

Introduction

Maintaining the footer at the absolute bottom of the page can be challenging when the content of the page is dynamic and varies in height. This article delves into a technique to automatically position the footer at the bottom of the page content or the bottom of the browser window, depending on which is lower.

Dynamic Content Loading

In your scenario, content is dynamically loaded into the

element using JavaScript. As the content changes, the height of the

also changes. You desire to maintain the footer at the bottom of the page content even with this dynamic content loading.

Sticky Footers with Flexbox

Flexbox offers a straightforward solution for sticky footers. By creating a flex container (#main-wrapper) with the flex-direction set to column, you can have multiple elements arranged vertically within the container.

The key to achieving a sticky footer with flexbox is to assign a flex value greater than 0 to all elements except the footer. This ensures that these elements will expand to fill the available space vertically within the container.

In this case, the

element is assigned flex: 1, which tells the browser to expand it to fill the remaining space after the fixed-height header and navigation elements.

Code Snippet

The following code demonstrates how to implement a sticky footer using flexbox:

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

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

article {
  flex: 1;
}

Conclusion

By leveraging the power of flexbox and using the min-height property on the container (#main-wrapper), you can create a sticky footer that automatically adjusts its position based on the height of the content. This approach provides a flexible solution for dynamic content loading while ensuring that the footer remains at the bottom of the page or browser window.

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