Sticky Footer

I want to implement a sticky footer on my site. I found this bit off code on CSS-Tricks:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

I'm new here and I'm just wondering if someone can walk me through how to implement this. I tried to substitute .content with .tm-main, but it didn't work. Any help would be much appreciated.

Hi peeps,

I'd also like to use a sticky footer. By a sticky footer, I mean a footer which is at the bottom of the viewport, unless there is content which extends below the bottom of the viewpoort, where the footer should then appear below the content (The main problem this solves is to push the footer to the bottom of the viewport when there is little or no content to display.). I hope that makes sense.

My current project has a full screen image slidewhow on the home page and I'm having problems getting the footer to be at the bottom for the screen on all devices (because there is no content in main content section). I've searched around on these forums and have also searched for UIKit related things, but nothing I try is working.

This must be an issue which others have already solved, so any ideas or advice on what to try next would be greatly appreciated.

All the best, ~ Rik

Hey

I have been using the code I wrote about here: https://wpbeansframework.com/2016/11/26/fixed-sticky-header-and-footer-beans/

Various browsers handle the fixed/sticky footer a little different. But it mostly does the trick so to speak.

Paal Joachim

Hi Paal,

Thanks for the link, I had seen your post in my searching actually.

I've tried several things, but nothing really works very well for pages without enough content to push the footer down. I had to make sure each page has enough content and to use position: fixed for the footer on my home page which has no content (because of a full page background image).

All the best, ~ Rik

Hey Rlk

Please post in this thread when you find code that does it even better then the code I shared.

Have a great weekend!

Paal Joachim

I asked in the https://gitter.im/uikit/uikit in how to set up a sticky/fixed footer using UiKit. I was advised to use: https://getuikit.com/docs/height#viewport-height with the option expand: true.

I do not know yet how to set this up in Beans and I am working on figuring it out. Do please share if you happen to have some pieces of helpful information.

Hello Paal,

I personally use JavaScript. Here is the code i have created, it's simple (29 lines of code), written in pure JavaScript.

All is needed is to set the footer ID or Class name to initialize it, or leave it as it is .tm-footer.

(function(dom) {
    // UTILITIES.
    function updateSize(footerSize) {
        dom.body.style.paddingBottom = footerSize + 'px';
    }
    function initStyles(el) {
        var wpAdminBar = dom.getElementById('wpadminbar');
        dom.body.style.position = 'relative';
        dom.body.style.minHeight = null == wpAdminBar ? '100vh' : 'calc(100vh-' + wpAdminBar.offsetHeight + 'px)';
        el.style.position = "absolute";
        el.style.width = '100%';
        el.style.bottom = "0";
        el.style.left = "0";
    }
    function makeSticky(selector) {
        var el = dom.querySelector(selector);
        if (el != null) {
            initStyles(el);
            updateSize(el.offsetHeight); // update on startup.
            window.onresize = function (){
                updateSize(el.offsetHeight); // update on responsiveness.
            };
        }
    }

    // INITIALIZE WHEN DOCUMENT IS READY.
    dom.addEventListener( 'DOMContentLoaded', function(){
        makeSticky('.tm-footer'); // Your footer ID or Class.
    });
})(document);

Hey Joseph

Do you happen to also be on slack? It would be good to connect. I added your code to a global.js that I have with some other code, but it is producing errors.

I have been doing some more research with UiKit. This is almost working. The experimenting continues.

beans_uikit_enqueue_components( array( 'height' ), 'add-ons' );
beans_add_attribute( 'beans_main', 'uk-height-viewport', "expand: true" );