How to Extend Footer to Bottom on Divi Theme

Have you ever had the problem with your Divi footer not displaying at the bottom of your page? Especially if that particular page had little content?

If yes, I have a quick solution to this problem: What I do in such cases is to set the background color of my Divi website to the same color as my footer (bottom bar) has. This way there won’t be any white space below your footer. If you have not changed the color of your bottom bar, just set #171717 as the background color of your website in the Divi customizer (in General Settings > Background). This is the default Divi footer color, so it will blend in nicely with it.

Alternatively, if you want to get rid of white space below footer on your Divi website, you may try adding the following code to the Custom CSS field in the Divi Theme Options:

html { background-color: #171717 !important; }

This may work especially in cases when you have a custom footer built with the Divi’s Theme Builder feature.

And don’t worry, if you set your background color to e.g. dark gray, your website’s main background areas will not have this color. They will stay white. Because the page builder sections have the white color set as their default background color.

Also, if you don’t know how to edit the default Elegant Themes text links in your footer, check my other tutorial on how to do this.