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:display: flex;
flex-direction: column;
height: calc(100vh - 127px);
Here, you’re essentially saying make theet-main-area
as 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:flex: 1;
And that should do it — a sticky footer for the Divi theme.