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.

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 Simple Version of the CSS Code

The code is pretty straightforward. It tells the page-container to fill the screen vertically (100vh) and the main-content to fill the space.

/* Force all pages to fill the screen */
#page-container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
#et-main-area {
  display:flex;
}
#et-main-area, #main-content  {
  flex: 1 0 auto;
}

The CSS Code to Use

Since flex-box is still relatively new, you’ll want to add all the different vendor prefixes to make sure it works for everyone.

#page-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
  flex-flow: column;
  min-height: 100vh;
}
#et-main-area {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-flow: column;
  flex-flow: column;
}
#et-main-area, #main-content  {
  -webkit-box-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

Summary

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

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

Update 1: There was an error in the code of the original post. The selector on the last declaration was changed from #main-content to #et-main-area, #main-content.

Update 2: The original code didn’t work on Internet Explorer 11. I revised the code based on the recommendations of Philip Walton in this article.

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