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

Introduction

In web development, it's essential to ensure the proper positioning of elements on a webpage, especially when dealing with dynamic content. One common challenge is achieving a footer that remains at the bottom of the page or content, depending on which is lower.

Problem Statement

The provided HTML structure includes a parent wrapper element (#main-wrapper) containing a header, navigation, article, and footer. The challenge is to dynamically adjust the footer's position based on the content height within the article element. The footer should stick to the bottom of the page when there's ample content but move to the bottom of the browser window when content is limited.

Flexbox Solution

One robust and modern approach to solving this problem is by leveraging flexbox. Flexbox offers a versatile layout system that simplifies positioning and alignment of elements within a container. By making use of flexbox's ability to vertically align elements, we can achieve the desired sticky footer behavior.

CSS Code

The following CSS code employs flexbox to implement the sticky footer:

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

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

article {
  flex: 1;
}

In this setup, the #main-wrapper element is the flexbox container, and it has flex-direction set to column, meaning elements will be stacked vertically. The article element has flex: 1, which makes it occupy the remaining space not taken up by the header and navigation.

When there is ample content within the article, it grows to push the footer down, positioning it at the bottom of the page. However, when content is limited, the article shrinks, and the footer dynamically moves to the bottom of the browser window, as the #main-wrapper element's min-height ensures it always fills the viewport.