# Keep the Footer at the Bottom on Short Pages

> Stops the footer from floating halfway up the screen on pages with little content, by letting the main area grow to fill the window. Works with block and classic themes.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: footer, layout, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-sticky-footer/

## Code

```css
.wp-site-blocks,
#page.site {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child,
#page.site > .site-footer,
#page.site > #colophon {
    margin-top: auto;
}
```

## Notes

Classic themes need a wrapper like #page around the content and footer, which most themes have.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Keep the Footer at the Bottom on Short Pages" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/