Page always 100% height

Is there a way to make all page be a minimum 100% height?

So I want the footer at the bottom of the screen if the page is short, but if the page is long I want the footer to move down and not be at the bottom of the screen. I hope that makes senses. Thanks.

Hi there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

You can try adding this code in the CSS:

.site {
    min-height: 100vh;
}

But this will only set a minimum site height too the full height of the screen and would not push the footer to the bottom.

I am a developer. I just hoped that you had a quick solution that was also best practice.

Your solution had no effect.

.x-main.full {
min-height: calc(100vh - 322px);
}

Worked. 322px being the height of the footer.

Glad you’ve sorted it out.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.