The Problem

I´m sure you had to face it more than once. In a Divi site, whenever a page or post does not have a lot of copy, i.e. when the content is too short, the footer may appear to be floating in the middle of the page, leaving an awkward blank space below it.

Here´s what I mean, I guess you´re already familiar with it:

I know the example I used for that image is a particularly short post, with just an small image and a few lines of text. But sometimes you just need a short content, so this issue is something you or your clients (in case you are a Divi professional) will be facing from time to time. For a particular page you might think of just adding a spacer module, a blank section or a bit of code at the bottom of the content to force the footer down, but that´s not a real solution. Plus, what happens if is not you but your client who is publishing that short content?

Let´s say for instance that your clients just want to quickly publish on their website some kind of announcement with a link to an event or a new service. All they´d need for that is a title, a sentence or paragraph including the link, and maybe an image. Do you think they would like it to look like that on the Divi website you designed for them? I´m sure they wouldn´t.

Some possible solutions

The first concept that comes to mind when thinking about this is “sticky footer“, right? Also, the more immediate impulse seems to be to use CSS to accomplish it. Well, you can get a sticky footer with just a little CSS code like this:

But that way your footer would be truly sticky, meaning it would remain fixed at the bottom of the browser window under all circumstances. And that´s not how I´d like it to behave. Why? Because it would always stay there at the bottom of the page eating up some valuable space, even for post or pages with a lot of content.

So what we really need then is not a sticky footer but what I call a quasi-sticky footer: a footer that does not behave as a sticky footer all the time, but only when needed. With a quasi-sticky footer solution, for short pages with little content the footer would behave as a sticky one, but it will not remain fixed on the bottom for long post or pages.

Continuing with pure CSS, I´ve also seen some ingenious approaches to create a quasi-sticky footer. They are based for example on viewport units used in conjunction with the flex property, or with the calc() function, all of them already supported by most modern browsers. Here you have an example:

But I found that all these solutions suffer from the same issue: lack of flexibility. In the example above, the amount of 140px that is deducted from the total viewport height accounts for the sum of the height of the header (80px in this case) and the footer (60px typically for the Divi footer bottom bar). So, if anything that could affect the height of either the header or the footer changes along the life of the website, that CSS would need to be manually modified or else the footer will not be placed on the right position.

In any case, those approaches won´t work in cases where the header or the footer could change in any dynamic fashion.

So our next step will go in the javascript direction, rather than trying to use plain CSS. There have been some good JS approaches to a sticky footer proposed around the Divi community.

However, all the JS code for this purpose I´ve found published so far has some flaws. Some of them are the following:

• It won´t work correctly in every case, for example it won´t work when Divi vertical navigation is enabled.
• The footer position won´t adapt to a window resize. If the browser window is made higher by pulling down its bottom, the footer will still remain floating in the same position it was before the window resize, with all the white space below. So it will not always behave as a sticky footer when needed.
• It will push the footer further down than needed when the user is logged in, which is not a real “production” problem but it makes the page look strange nevertheless.

The proposed solution

So I finally decided to go ahead and develop my own JS script to get a more flexible and responsive Divi quasi-sticky footer. I was lucky to stumble upon Jason Champagne´s post How to Create a Full Screen Slider with Divi on the Elegant Themes blog by the time I was thinking about this, because the code he proposed for the full screen slider gave me a lot of inspiration.

Based on that and after some readjusting and testing, here´s the code I finally developed for the quasi-sticky footer:

It looks pretty straightforward now that it´s finished and tested. Note that I used both the window load and resize events in order to make sure the position of the footer adapts properly to any situation. However, the footer height variable must be taken before. Otherwise, for some reason, its value will not be the correct one; for example the value 62px would be considered instead of 60px for a regular Divi bottom bar, leaving an awkward 2px white line below the footer.

Also, that JS code should be added to the <body>, otherwise it would not work properly. If it was added to the <head>, the footer would not properly exist and the code would not work at all.

How to use it

So the easiest way to add the proposed JS code would be to paste in the Integration section of your Divi Theme Options, in the box labeled “Add code to the < body > (good for tracking codes such as google analytics)“. For it to work, you need to make sure that the “Enable body code” switch found in the same Integration section is set to Enabled.

You can also integrate the quasi-sticky footer feature into your Divi child theme, by saving the code contained within the <script> tags to a JS file and then enqueueing it by means of a hooked function in your functions.php, for example.

But you still have one more option to get your Divi quasi-sticky footer:

The Divi Quasi-Sticky Footer plugin

I know some people would not enjoy too much dealing with the JS code and would rather favor a quick solution to apply to their site or to any future site they build, in the form of a WP plugin.

So I went ahead and made that quick solution available for them. Let me introduce you to the Divi Quasi-Sticky Footer plugin.

Divi Quasi-Sticky Footer is a small, lightweight WordPress plugin based on the code I´m proposing here. It has no settings, it only needs to be installed and activated in your site and you´re all set.

It is free and it´s already available for download from its plugin page.

Enjoy it!

• Author
• Recent Posts

Luis Alejandre

Luis is the creator of Divi4u and the editor of this blog. You can read more about Luis in his About page. Luis also created and runs the free online WordPress tool WPThemeDetector.

Latest posts by Luis Alejandre (see all)

• New Divi Children 3.0.10 update released - April 7, 2022
• New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
• Understanding Divi Children Output Mode - October 11, 2017