Quick Tip: How To Create A ‘Sticky’ Footer in Divi

“Content is king” as the saying goes, but sometimes we just don’t have the need to fill up an entire web page full of it. There are many times that we just want to create a page with a paragraph or so of text a small image gallery, or a couple of FAQ’s. This is fine and there is absolutely no problem with it, except your page in Divi can end up looking a little funky and not as professional as you’d like.

The issue is, that without enough content on a page, the bottom of your site will not extend the full height of the computer monitor and will look out of place compared to your other pages.

Take a look at the screenshot below for an example of this and note all the white space below the footer:

Now it’s time for the simple solution

Okay so now what I am going to do is provide you with some handy-dandy code to place in your website. After you add this code to the proper section, your footer will extend the full height of the monitor, regardless of how much content you have.

From your dashboard, please navigate to Divi >> Theme Options >> Integration and insert this code in the section marked: “ADD CODE TO THE < BODY > (GOOD FOR TRACKING CODES SUCH AS GOOGLE ANALYTICS)” and Then press ‘SAVE CHANGES’.

Here is the code:

<script>// <![CDATA[
var th = jQuery('#top-header').height(); var hh = jQuery('#main-header').height(); var fh = jQuery('#main-footer').height(); var wh = jQuery(window).height(); var ch = wh - (th + hh + fh); jQuery('#main-content').css('min-height', ch);
// ]]></script>

Take another look now that the code has been added and see how the footer is now stuck to the bottom of the page. Much better!

Check out the video below for a step by step tutorial of how to achieve the Sticky Footer

Cory Jenkins

I am a an Avid WordPress User/Developer/Blogger and Co-Founder of Aspen Grove Studios. When I am not designing awesome stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors.

Previous post
Next post

36 Comments

  1. Carlo Diego

    Excellent quick tip! This is one of my pet peeves in Divi/Extra. Great job on the site revamp too!

    Reply
    • David Blackmon

      Thanks Carlo!

  2. rcards

    I added the code as indicated and the footer now sticks closer to the bottom of my screen, but it still leaves some of the background showing towards the bottom of the screen. I am using Aspen Grove’s Cafe Child Theme for Divi – the newest version of WP, WC, DIvi and Cafe child theme. I have tried this using multiple desktop browsers on multiple machines (retina and regular displays) – there always seems to be about an inch of the background showing under the footer now…much better, but how can this footer STICK to the BOTTOM of the browser window, when the page does not fill up the screen?

    Reply
    • Cory Jenkins

      Hello Randall,

      I have responded to your support ticket. I was going to post the solution here as well, but the code is not displaying in the comment field. Will have to figure that out :-/

  3. Todd

    +1 to ‘rcards’ same issue, leaves about 1″ or more below the footer.

    Reply
    • Cory Jenkins

      This only happens on a handful of sites and I am not sure why… on all of our dev sites the code works perfectly

  4. Howard Roussel

    did anyone figure out how to remove the left space at the bottom. (same issue as rcard)

    Reply
    • David Blackmon

      Hi Howard,

      We have not looked into that but please post an update here if you find a solution, thanks!

  5. myonlinegenius

    Thank you for this, Cory.

    Reply
  6. Terry Smith

    Hi, this didnt work for me for some reason. Has this been updated for the latest Divi? Thanks

    Reply
  7. Paula Finch

    I love you!

    Reply
  8. ght

    Great quick fix – thanks

    Reply
    • Cory Jenkins

      Our pleasure 🙂

  9. trifo13

    Awesome! I was searching for that. Thank you very much.

    Reply
  10. Brenda Nicholson

    This is exactly what I was looking for. Thanks so much.

    Reply
  11. Alan

    Works great. Just remember to flush/clear cache if you’re using it on your site, for the code to start working 😉
    Tnx.

    Reply
  12. Mike Cotton

    I noticed it didn’t change when resizing the browser, so I made a slight modification. Thanks for sharing!

    //

    Reply
  13. NaturalNutritionGuru

    Works perfectly – and looks much better than trying to anchor with CSS – THANK YOU!

    Reply
  14. Naphtali Visser

    Here is a simple CSS-Only solution.

    Go to Dashboard > Divi > Theme Options > Custom CSS, and enter this CSS.

    #main-footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    }

    Reply
    • Jurrie Eilers

      not fixed, but absolute, and put in a code module on the page:

      #main-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      }

  15. Karim

    Naphtali thank you for the shortest best solution.

    Reply
  16. Baby Unicorn

    Thank you so much! I’ve seen so many solutions for this, but yours was, by far, the easiest and quickest.

    Reply
  17. Cecilia

    Thank you, you are Awesome!

    Reply
  18. atheunis

    That works great, thanks! better than the CSS-version (below) where the footer isn’t pushed down on pages with more content.

    Reply
  19. Sir greaful

    Awesome solutions, thank you very much!

    Reply
  20. Bluebug

    Just thought I’d add that the sample code doesn’t work for vertical navigation, but it can be modified and then the code is a lot shorter (script and CDATA tags omitted, in case the comments don’t like them) :

    var fh = jQuery(‘#main-footer’).height(); var wh = jQuery(window).height(); var ch = wh – fh – 1; jQuery(‘#main-content’).css(‘min-height’, ch);

    Don’t ask me why the -1 is necessary, but I found it is…

    Reply
  21. Jason Tanner

    Naphtali, thanks so much for a quick solution. I had the same trouble with some background showing under footer, but your css solution took care of it. Thanks.

    Reply
  22. Omkar Kibe

    Bluebug, Yes I have built a website with Vertical navigation and even the code didn’t work for me. So, I copy pasted your code, but it didn’t work. Did i miss anything? Is this the complete code or do I need to edit in between those ‘script’ and ‘CDATA’? Sorry, I do not know coding. Thanks.

    Reply
  23. sneader

    The problem with this solution is that the footer is visible all the time, even on mobile. This can waste a lot of precious screen space. If you implement this solution, be sure to test your site on a mobile device.

    Reply
    • Chips

      Hi Sneader, did you find a solution that works for a large browser on a PC and on a mobile device? When I used this code, content ends up being covered by the sticky footer on a mobile device.

  24. sneader

    … I meant to say, the “CSS-only” solution keeps the footer visible, even on mobile. The original script-solution doesn’t do that, and works much better.

    Reply
  25. GruffGamer

    I found a fix that (mostly) worked for me by adding this to my style.css:

    #main-footer { height: 275px; }

    The actual height of my #main-footer is 300px, but for some reason setting it too close to the actual height still causes the gap. Works in both Chrome and Firefox, desktop and mobile (Android) view for me.

    Note though that on IE there’s still a 1px gap on the bottom – better than the large gap before!

    Reply
  26. anwar456

    Great Article.Works like a Charm

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.