Sticky Footer for the Divi Theme

2 minutes to read

There are a lot of fine tutorials on how to create a sticky footer with flexbox, but they are all predicated on the overall markup looking something like this:

<body>
    <header></header>
    <main>Content goes here</main>
    <footer></footer>
</body>

This doesn’t work for the popular Divi theme, where the markup is more or less structured like this:

<body>
    <header></header>
    <main>
        <section>Content goes here</section>
        <footer></footer>
    </main>
</body>

After trying several permutations of various flexbox declarations on the various divs, I devised a reliable method to accomplish the sticky footer. The solution requires browser support for flexbox and calc.

  1. Get the height of the header in pixels. For this example, it’s 127 pixels.
  1. For the “main” div (in Divi, it has an ID of et-main-area), add the following style declarations:
    display: flex;
    flex-direction: column;
    height: calc(100vh - 127px);
    Here, you’re essentially saying make the et-main-area as tall as the viewport height minus the height of the header.
  2. For the “section” div (in Divi, it has an ID of main-content), add the following style declaration:
    flex: 1;

And that should do it — a sticky footer for the Divi theme.