WordPress And The Sticky Footer Pattern

WordPress sites occasionally have pages with little content. The footer ends up in the middle of the viewport, with empty space below it. The layout looks broken.

The sticky footer pattern keeps the footer at the bottom of the viewport on short pages while allowing it to position naturally on long pages.

The CSS pattern

The simplest modern implementation uses flexbox:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

The body fills at least the viewport height. The main content flexes to fill available space, pushing the footer to the bottom when content is short.

The grid alternative

Grid layout produces similar result:

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

The header and footer take their natural height; the main content area takes whatever space remains.

The theme implementation

Most quality WordPress themes implement sticky footer correctly. Check by visiting a short page (like a 404 page) and observing whether the footer floats or anchors.

If the theme doesn't handle this, the CSS can be added via Customizer's Additional CSS or a child theme.

The honest framing

Sticky footer is a small detail. Sites that handle it correctly look polished on every page type. Sites that don't have visible inconsistencies on short pages.

The fix takes 5 minutes if needed. Most themes already handle it; verification is the only required action.

The mobile considerations

On mobile, viewport height varies (browser chrome shows and hides on scroll). The 100vh measurement can produce slight layout shifts.

The newer CSS unit (dvh, dynamic viewport height) addresses this. Use 100dvh instead of 100vh on browsers that support it; fall back to 100vh elsewhere.