Sridhar Katakam

Genesis and WordPress Tutorials

How to push Footer all the way down when there’s little content in Genesis

by 17 Comments

Updated on December 20, 2017

Looking for a way to push your Genesis site footer to the bottom of pages that have less content?

Before:

After:

Add the following in child theme's style.css:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Sridhar,
    Thanks, that sounds great! There are, as you know, various CSS ways of attempting that, but I don’t know of one that is rock-solid between good and horrible browsers – to handle that, jQuery to the rescue! 🙂

    I hope you’re enjoying your new home!

    Best, Dave

    Reply

  • Hi Srid,
    I like the way this has been thought up, creating full pages. This would even be more awesome if the div for the content would be at least stretched out to the heigth of a screen. I believe the Centric pro theme does a similar thing with it’s landing page. This way, the footer doesn’t need to ‘stick’ at the bottom through a script.

    Reply

  • Hi Sridhar,

    Thanks for the code – how could I achieve them same for the FOOTER WIDGETS as well as the SITE FOOTER?

    ie: the FOOTER WIDGETS and SITE FOOTER stick to the bottom of the screen?

    thanks

    Phil

    Reply

    • Hi Phil,

      My site-footer is 96 pixels high, so my widget area should have bottom: 96px.
      So I changed this:

      in sticky-footer.js:

      if (vwptHeight > bodyHeight) {
      $(".site-footer").css("position","absolute").css("bottom",0);
      $(".footer-widgets").css("position","absolute").css("bottom",96);
      $(".site-footer, .footer-widgets").addClass('sticky');
      }
      else {
      $(".site-footer").css("position","static");
      $(".site-footer").removeClass('sticky');
      $(".footer-widgets, .footer-widgets").css("position","static");
      }
      } stickyFooter();

      And in style.css:

      .sticky.site-footer, .sticky.footer-widgets {
      width: 100%;
      }

      Reply

    • My first attempt today bumped it down a bit — but not enough to justify adding the script to my site. Not overly important to me to get this to work, but it’s a VERY, VERY cool idea! 🙂

      Reply

    • Metro Pro css sets a bottom margin of 48px on all elements with class “sticky.” For Metro Pro, change the css from the tutorial to read:

      .sticky.site-footer { margin-bottom: 0; }

      You do not need to set the footer width to 100% nor do you need to do all the repositioning in the functions.php file because the footer already exists outside the site container in Metro Pro. For the functions.php, you just need the “Enqueue scripts” part.

      Reply

      • My apologies, you do need to set the width to 100%. If I could edit my comment above I would. The css should look like this in Metro Pro:

        .sticky.site-footer { width: 100%; margin-bottom: 0; }

        Reply

  • Hi,

    I have a problem with Microsoft Edge 41.16299.15 and this stick footer to the bottom-solution. Randomly after having read at least one page without problem, the footer on a following page will become stuck somewhere in the middle of the page, covering text or images.

    Microsoft Edge also rarely and randomly totally mixes up the rendering of my site. My theme is i Minimum Pro 3.2.1 with some modifications. I have asked Jeff Clayton about my problem with Edge. Here is our dialogue:

    https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/comment-page-1/#comment-866

    To me it seems that Edge is running in to problems with jQuery. Do you Sridhar, or anyone else here, know how to solve this random problem with Genesis Minimum Pro?

    Tomas Risberg
    https://silent.se

    Reply

  • Thank you!

    I can confirm that this css-only sticky footer solution works fine in the latest versions of Microsoft Edge, Mozilla Firefox, Opera, Pale Moon and iOS Safari. It also looks better than the jQuery-based sticky footer: Now the footer is positioned at the the correct position from the beginning. You don’t see any moving footer like with jQuery.

    But there is a problem: this solution doesn’t work with Internet Explorer 11 and my slightly modified Minimum Pro 3.2.1 theme. Reading my site with IE11 you will see a huge distance until the text begins in pages using the featured image. And on some pages browsing my site with IE11 the footer will become mixed up with other content.

    I hope there is a simple solution to this problem, since it’s actually worse for me if IE11 doesn’t work than if Edge doesn’t, because my readers are browsing IE11 about four times more than they are browsing with Edge.

    Reply

      • Go to
        https://silent.se/

        At this start page you will randomly in IE11 see an unwanted distance between the featured image and the main heading of that page. The footer is at the same time ok at that first page.

        Then in IE11 click on for example IN ENGLISH in the menu and choose Psych*. There you will see that the footer is mixed up with the content of the page. If you choose to click on any other item at Psych* you will see that the longer the page the higher up on the page will IE11 put the footer, mixed with the page content.

        Reply

        • I am not aware of a solution to this problem. We can perhaps work around this by making the sticky footer CSS specific to only those pages which are really short?

          On what pages/URLs do you want the footer to be sticky i.e., what pages of your site have really less content?

          Reply

          • Thanks, that sounds like a good idea. Then the chance that the reader experience a problem with the footer will be minimized. 2% of my readers use Microsoft Edge, while 8.8% are on Internet Explorer 11. According to this statistics, the best solution would then be to continue use the jQuery based sticky footer, but to make it only load on the few pages that actually needs it. As I remember I have about four to five pages at my live site that actually need a sticky footer, this is one of them:

            https://silent.se/psy/alskad/

            I have a testpage with little content for this problem at:

            http://exp.silent.se/exp-en/test-little-text/

    • >