Sticky footers

Creating a footer which sits at the bottom of the container or viewport when the content is shorter.

Grid

This is the header

The footer sticks to the bottom even though this paragraph is short. Add content to this editable area to see the footer push down when needed to fit the content.

Sticky footer

Flexbox

This is the header

The footer sticks to the bottom even though this paragraph is short. Add content to this editable area to see the footer push down when needed to fit the content.

Sticky footer

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers