Archived topic
Extend container to bottom of the screen
7 replies · Started by Florian on February 11, 2019
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.
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/
This put my footer right into the middle of the screen
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
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)
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
Ok, it's not a big deal. Thanks for your help!
No problem :)
