Force Footer to Bottom of Page

[SoBeGuy]

How can I force the footer to the bottom of the page in Pro 6.2.5? I tried the following code, but it doesn’t do anything:

body:not(.admin-bar) #x-root {min-height:100vh;}
body.admin-bar #x-root {min-height:calc(100vh - 32px);} 

I want the footer to always be displayed at the bottom of the page, even on pages with little or no content.

[tristup]

Hi Brad,

Thanks for reaching out.
You need to point to the exact class before the footer so you can adjust the height. You can use the .x-main class to do that, and your code will look like the following.

body:not(.admin-bar) #x-root  .x-main {min-height:100vh;}
body.admin-bar #x-root .x-main {min-height:calc(100vh - 32px);} 

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks