Extend page (content) height

[Laura]

I have a page design with only one content container (i.e. no sidebars and content layout is set to one container). I would like to make the main container extend to the bottom of the browser window (footer showing as well) regardless of how much content there is on a page. So that there would not be any background showing after footer.

I’ve tried some css but no success. Is this doable?

Thanks much 🙂

[Tom]

This is do-able using javascript, but it always seems to be a little iffy.

The answer here is pretty good: http://stackoverflow.com/questions/9214040/how-to-properly-set-the-100-div-height-to-match-document-window-height

You can add that CSS in GP Hooks in the wp_footer area between <script></script> tags.

Let me know if that works for you or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Laura]

Thanks again Tom :).
I may just leave it as it is, but good to know I have a back up plan if the client really doesn’t like the page the way it is.

Great template, addons and awesome support Tom. Really happy I stumbled across GeneratePress!

[Tom]

Glad you’re enjoying GP!

If you decide to tackle this and run into issues, let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michaella Seidel]

Hi Tom,

in the meantime, is there a better way to achieve this?
How would I add the wrappers of the proposed method to each page?

Cheers,
David

[Leo]

Hi there,

I believe you are referring to the same issue here: https://generatepress.com/forums/topic/disable-background-passed-the-footer/#post-277019

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

[Michaella Seidel]

Hi Leo,

unfortunately not. I think the problem is similar but not the same.
In my case the page is not tall enough as well and that leads to undesirable white space below the footer bar.

[Leo]

That is the same problem actually.

Have you tried applying the CSS?

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

[Michaella Seidel]

Yes. Unfortunately not working… 🙁

[Tom]

That CSS is supposed to add the same color as your footer bar below the footer, so there’s not a sudden color change.

Actually sticking the footer to the bottom of your browser requires javacript, which will hurt the performance of your page. Might be better to use the above method, or even set a min-height to your content?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts