How to keep footer at bottom of page when page has very little content?

Support
#1

Hi, please see page in secure note. You will notice the footer is floating halfway up the page.

I need the footer to always stay on the bottom, no matter how long the content is.

Can you please explain how this is done? Thanks.

#2

Hey there,

Regretfully, there is no option for sticky footers. If you want, you can build a header with a bottom bar and that will achieve the sticky footer effect.

Other solutions would require custom development. You might want to try this https://css-tricks.com/couple-takes-sticky-footer/. Please note though that custom development is outside the scope of our support.

Thanks.

#3

Hi, what do you recommend in this case, as you can see this looks quite unprofessional.

Should I just “fake it” and add some margins/padding to the page to fill up a “normal” screen?

Perhaps we could also submit a feature request for the option to have a sticky footer, since this is an important part of a website?

Thanks

#4

Hi There,

If I understand you correctly, your main issue is your page does not have enough content to push the footer below the fold and causes some white space, right? Then you can add the custom CSS below on your Theme Options so your content container will have enough height to cover the entire fold on any desktop screen size.

@media (min-width: 980px) {
	.x-container.max.width.offset {
		min-height: calc(100vh - 287px);
	}
}

The 287px is the sum of the height of your header, footer, and top & bottom margin of the main container.

Hope it helps,
Cheers!

#5

Sorry this seems too specific, if I change my header/footer/content the numbers will not add up.

Can you submit a feature request on my behalf for a specific sticky footer option please?

#6

Hi there,

This has been added to the feature request list.

Thank you.

#7

Hi there, just wanted to chime in to say we won’t be adding this as a feature. The best option would be to use a min-height CSS rule on your content to ensure it fills the screen.

#8

Why would you not add a properly adjusting footer as a feature for small pages? This solution is suboptimal.

PS - Thank you for your support & recommendation.

#9

Hi,

There are too many variables that needs to be considered and each page on each site is unique.

As my colleague have suggested, the solution would be to add a min height.

Thanks