layout
CSS Flexbox Sticky Footer
Push the footer to the bottom of the viewport on short pages using two lines of Flexbox.
A sticky footer pattern ensures the footer sits at the bottom of the viewport even when the page content is shorter than the viewport height. The Flexbox approach is the cleanest solution — set the body to a flex column with min-height: 100vh and give the main element flex: 1 to consume all available vertical space.
Usage Note
Apply to the body element (or a full-height wrapper). The key is flex: 1 on main — this shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0% makes main expand to fill all remaining vertical space between header and footer.
Tags
#sticky-footer#flexbox#layout#footer#min-height