Fixed Footer on Short Pages

[razorpig]

Hi,

I just added a search facility to my website, but on pages with zero or only a few results, the footer is not at the bottom of the browser window ( see image ).

How can I make the footer stick to the bottom of the page on this and all other short pages?

Many Thanks

[ruenel]

Hello There,

Thanks for writing in! This issue usually happens when you have very short page content and does not cover the entire height if the page in your browser. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.site .x-container.max.width.offset {
    min-height: calc(100vh - 425px);
}

where 425px is the total height of the header, title and your footer.

We would loved to know if this has work for you. Thank you.

[razorpig]

Thanks RueNel, that almost worked, but the lower section of the footer is still not showing (see image )

The full footer should look like this :

I previously tried to resolve this issue using the following JS that I found in a previous thread :

…but this placed the footer just off-screen rather than flush with the bottom of the browser window. It would be nice to understand both the CSS and JS solution for future reference.

Thanks again for your time

[razorpig]

Hello again,

This code works for the CSS solution but I don’t really understand why :

…where 481 is the combined height of the header + title + ( footer x 2 ) - adminbar ? I’ve no idea why I would have to include the footer height twice and then subtract the height of the admin bar ?

[paul.r]

Hi,

Please refer to this screenshot

In that code it is trying to set a min height to your inner container(red box in the screenshot).

100vh is the full viewport height.

So to calculate for the min-height of your inner container.

Full viewport - (header height(blue box) + footer height(blue box))

Hope that makes sense.

[razorpig]

Hi Paul,

Many thanks for the explanation, but the figures in this particular case weren’t adding up. I believe there is much more than the just the header and footer height to consider. Referring to the image, to set the correct minimum height for the inner container (red) I’ve had to account for not only the header & footer (blue), but also the title area (purple) and the offset values (yellow) - finally there’s also the margin (not shown) above the title area.

For others reading this thread, with so many factors to consider, I found it much easier to simply adjust the pixel value in the inspector until I got it right.

I think it must have been the margin and/or offset values that were throwing out RueNel’s original solution.

Thanks for getting me on the right track Great support !

[rad]

Hi there,

You should add them too (margins), the sample is just illustration of how it can be done and it could change depending on user setup. Example, it’s different in a 404 page than a search result. But I checked your current search result page and it’s all good with calc(100vh - 539px).

You may also utilize the @media query to specifically add min-height since the header and footer height changes as the content compresses.

Thanks!