Fill footer color to bottom of page

[mikeb82]

On shorter pages, the body background color appears below the footer. How do I get the same background color as the footer background to fill the page below the footer?

Dev site URL: https://oakmountainwebworks.com/mission/

I know that this can easily be handled by increasing the min-height for the content. It would be good to know how to handle this issue with CSS. I did this on the About page on this site.

[Leo]

HI there,

Try this CSS:

body.page-id-77 .site-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

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

[mikeb82]

Thanks Leo,

That took care of the issue. I hadn’t considered just fixing the footer to the bottom of the page.

Mike

[Leo]

No problem 🙂

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

[Elizabeth]

Hi there,

I tried throwing that CSS on my site but it’s not working – also tried removing the page id but it still shows the background color below the footer when you pull or scroll it. How can I fix that?

-Liz

[Leo]

Any chance you can open a new topic and link us to the page in question with the CSS applied?

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

[Author]

Posts