Push footer to bottom of page

Support
#1

Hello

I see someone has written in before about this and I have tried implementing the CSS suggested, however it doesn’t appear to be working.

I am developing a site in Pro and would like the footer to be at the bottom of the page, even if there is not enough content to fill the page. The problem really only occurs on large monitors where there is a lot of vertical space and with pages with little content.

I have included a photo to show you what I mean.

I have attempted the following CSS fix, however it doesn’t appear to make any difference. Any ideas?

/* Push footer to bottom of page */

.x-main {
  	min-height: calc(100% - 13em);
}
#2

Hello Callum,

Thanks for writing in!

The code is incorrect. Please have it updated and use this:

/* Push footer to bottom of page */

.x-main {
  	min-height: calc(100vh - 13em);
}

Assuming that 13em is the total height of your topbar, navbar and footer.

Feel free to adjust the value.

#3

Thank you that worked :slight_smile:

#4

You’re welcome Callum!
We’re glad we were able to help you out.

#5

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