[Resolved] Extend container to bottom of the screen

[Florian]

Hello,
when you click on the link I am posting, you can see that on very short pages that don’t go all the way to the bottom of the screen, the footer is displayed somewhere in the middle and below it, you can see the page background.
Is there a way to always have the footer at least at the bottom of the screen and fill the remaining space up with the content container?
Of course, if the actual content is longer than the screen I want to have it placed normally.

[Leo]

Hi there,

Give this CSS a shot:

.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Florian]

This put my footer right into the middle of the screen

[Leo]

It shouldn’t.

I’m not seeing the code being added though.

This is what happens when I add the code using browser inspect:
https://www.screencast.com/t/mzJAFpRcLC9

[Florian]

Your code works when there is no room to scroll. But if the page is longer than that, it stay where it is. I need it to adapt to larger pages as well.

Also, on your screenshot, the background is visible where the footer was before. I need the white middle part to extend to the bottom (as if it was filled with content)

[Leo]

There is no way to detect your page length without javascript.

See Tom’s comment here and the replies above for more options:
https://generatepress.com/forums/topic/extend-page-content-height/#post-467748

[Florian]

Ok, it’s not a big deal. Thanks for your help!

[Leo]

No problem 🙂

[Author]

Posts