Every Divi website seems to have at least one page where the content doesn’t fill the screen, resulting in a footer that floats up off the bottom, leaving the page background showing underneath, which looks amateurish.

Here’s a quick solution that uses flexbox to make the footer stick to the bottom. I found this solution in Lea Verou’s book CSS Secrets: Better Solutions Everyday Web Design Problems and adapted it to Divi.

The CSS Code

The concept is pretty straightforward. We use flexbox to tell the page-container to fill the screen vertically (100vh) and the main-content to expand to fill the space between the header and footer.

WordPress inserts the Admin Top Bar (which is 35 pixels tall) for logged-in users at the top of the page. In these situations, we subtract 35 pixels from the page-container.

Divi introduced the theme builder (in version 4.0). When a theme builder template is applied, Divi inserts a container element with the id of et-boc. In these situations, we need to attach our code to et-boc instead of page-container.

/* Force short pages to fill the screen. In other words, make the footer sticky. */
#page-container:not(.et-tb-has-template #page-container) {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.et-tb-has-template #page-container #et-boc {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
#et-main-area {
    display:flex;
    flex-flow: column;
}
#et-main-area, #main-content  {
    flex: 1 0 auto;
}
.logged-in #page-container:not(.et-tb-has-template #page-container) {
  min-height: calc(100vh - 35px);
}
.logged-in.et-tb-has-template #page-container #et-boc{
  min-height: calc(100vh - 35px);
}

Summary

Stick this in your custom stylesheet and never worry about short pages again.

If you have questions or comments, please leave them below.

Note: This page was rewritten on January 26, 2022, to reflect Divi changes and update code to current versions of CSS.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This