I have been developing Divi sites for a while and not until recently did I find the solution to a bugbear most Divi developers have, the floating footer!

Sometimes there will be pages that you create for your customers which may not have a lot of content, making the page quite small in height. When this is the case, the website footer will be found where your content finishes and this may display the footer mid page.

I found several ways of addressing this issue online, but most included the use of Javascript. I have a more elegant and less code heavy solution, which I now use on all my projects.

The code below fixes your footer to the bottom of the screen regardless of the amount of content found on the page.

/*Sticky Footer*/
html, body {height: 100%}
#page-container {position: relative; min-height:100%; height: auto !important; height: 100%; padding-bottom: 60px;}
#main-footer {position: absolute; bottom: 0; width: 100%; height:60px;} /*Change name of footer section and height accordingly*/

Was this article helpful?