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:
1 2 3 4 5 |
#main-footer { position: fixed; bottom: 0; width: 100%; } |
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:
1 2 3 |
#main-content{ min-height:calc(100vh - 140px); } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> (function($) { var $footer = $('#main-footer'); if ($footer.length) { var footer_height = $footer.height(); $(window).on('load resize', function() { var available_height = $(window).height() - footer_height, $main_content = $('#main-content'), $admin_bar = $('#wpadminbar'), $top_header = $('#top-header'), $main_header = $('#main-header'); if ($admin_bar.length) { var available_height = available_height - $admin_bar.height(); } if ($top_header.length) { var available_height = available_height - $top_header.height(); } if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) { var available_height = available_height - $main_header.height(); } if (available_height > $main_content.height()) { $main_content.height(available_height); } }); } })(jQuery); </script> |
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!
- 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
Nice plugin Luis!
Glad you liked it 🙂
Hi Luis
Your plugin works great now… Thanks again for the great work you do for us Divi users.
Warm regards
Great plugin Luis… Just install the plugin and the floating error is gone. I faced few difficulty while installing but when it is installed and when I saw it working… Very effort is worth it!!!
Glad you liked it, Ryan 🙂
Excellent solution. Thanks for your effort and for sharing it.
Hi Luis this is really cool. I tested it on a site that has a gravity form. It has a conditional and opens up more of the form when clicking on something. So what happened was the footer stayed where it was, interestingly the background disappeared. But ultimately it was on top of the form.
Just so you know and maybe add it to a bug fix list 🙂
I’ll definitely be using it for my other projects.
Best regards,
S.
You’re my hero ! Thanks a lot
Thank you! After many not-quite-perfect solutions, this one seems to do exactly what should be native in the theme! 🙂
I just added your code to my site. It works well. The only thing I noticed is this:
when stretching a window longer the footer stays sticky, but when resizing the window shorter, the footer disappears out of view until I do a browser window refresh (F5) …
I have tested it with Firefox and Chrome on Windows 10.
What can be done to automatically refresh the window when it is shrunk…
It doesn’t look like it works with footers that are implemented using the theme builder. Should it? Can it be made to? Thanks!
Hi, David.
No, it was developed just for the standard Divi footer, way before the theme builder was released.
I should look into that, thank you for pointing it out.