0

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): enter image description here

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!

1
  • 1
    You can try to set the main container display:flex, min-height 100vh, and set the foter alig bottom: align-self: flex-end. You need to have the footer inside the main container Dec 23, 2020 at 13:59

1 Answer 1

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] );
}
2
  • Hi Marin, thanks for your answer. My header height is 94px, I tried set min-height: calc(100vh - 94px );. Now I don't see the footer at all in the empty content page, only when I scroll down I can see it. It is actually more visually pleasant than before, but I think it's not what your solution was, isn't it?
    – Gio Bact
    Dec 23, 2020 at 17:19
  • 1
    If you want the footer to be visible, then find out the height of the footer and add it to the 94px. So calc(100vh - [94px + footer px]). You'll probably need to also write a media query if the footer and header height change on mobile. Dec 28, 2020 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.