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.
- Get the height of the header in pixels. For this example, it’s 127 pixels.
- For the “main” div (in Divi, it has an ID of
et-main-area), add the following style declarations:
height: calc(100vh - 127px);
Here, you’re essentially saying make the
et-main-areaas tall as the viewport height minus the height of the header.
- For the “section” div (in Divi, it has an ID of
main-content), add the following style declaration:
And that should do it — a sticky footer for the Divi theme.