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.
Opens WPIDE on
Code
.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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.