Wordpress footer always at the bottom of the screen-page

Question

I'm having a problem in fixing the footer always to the bottom of the page, also when there is not enough content in the page to fill it.

I found a lot of similar questions online and all of them suggested as solution to add code similar to the following:

footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

Here you can see the initial situation (footer in the middle of the page for empty content page):

And after applying the code, it seems correct. Indeed the footer is going to the bottom of the page, but not the way I want it.

The problem is that when the page is full of content (i.e. homepage), the footer is covering the content!

I want the footer to be ALWAYS to the end of the page and, if the page is empty, to the end of the screen.

Do you know how to achieve that?

Note: I'm using Astra theme and Elementor Pro as theme builder. My footer is created with Elementor.

Many thanks in advance to everyone who would help!

Answer 1

It sounds like you need the main body of the page to always fill the height of the viewport even when the content is shorter.

Find out the height of the header first so you can calculate the remaining height of the viewport.

.site-content {
  min-height: calc(100vh - [insert header height here] );
}