Sticky footer

Hi there,

For some reason they are quite difficult.

This topic may help: https://generatepress.com/forums/topic/how-to-stick-the-footer-at-the-bottom/

Let me know :)

Hi Tom, thanks but I have found that forum thread but for my site it works on Chrome/FF but not on Safari strangely enough.
Will try to find if I maybe do something else wrong.
When I really can't find a solution I will leave a reply to this thread.

Bye,
Damiaan.

It's weird, such an obvious thing some people would want, but very difficult to achieve without lots of javascript in most cases.

I've never found a solution for it that I like 100%.

Hi Tom,
I didn't think it would be weird for you ;-)
But thanks for reply and have a nice weekend.

Bye,
Damiaan.

You too :)

Tom, I have still a question. Because I use for the body of the site a background image (png, very small but with a color) below the footer also that image.
It would be great to see below the footer a white background.
I tried to place the background image on the content but than the background image will scroll.
Or I do something wrong ;-)

Hope my question is clear, is there a solution?
Test site: see this website

Thx

Unfortunately this is the same issue as before:
http://stackoverflow.com/questions/20621888/background-color-for-below-footer-only-unknown-height-of-area
http://stackoverflow.com/questions/1900813/footer-background-should-extend-to-bottom-of-browser

Did you look at this solution?: http://ryanfait.com/sticky-footer/

It's apparently compatible with Safari.

Hi Tom,
Thanks for the link from Ryan Fait. I know that site but it has a different html layout so I cannot use it for GP site or I need to change a lot I am afraid.

Is there a solution for the following:
Because I use for the body of the site a background image (png, very small but with a color) below the footer also that image is visible.
It would be great to see below the footer a white background.
I tried to place the background image on the content but than the background image will scroll or am I doing something wrong.

Site url: the site with the problem

Unfortunately it's the exact same issue - the only way to fix it is one of the solutions in the topic linked to above.

What about this simple little CSS? That worked for me very well.

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

Hi Olivier, this is quite an old post. But thanks for sharing, in case others need a similar requirement.

For anyone else, this might help:

html, body {
	height:100%;
}

body {
  display: flex;
  flex-direction: column;
}

div.container {
	flex: 1 0 auto;
}

div.site-footer {
  flex-shrink: 0;
}

hi, what's the best solution?

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

or

html, body {
height:100%;
}

body {
display: flex;
flex-direction: column;
}

div.container {
flex: 1 0 auto;
}

div.site-footer {
flex-shrink: 0;
}

??

Hi there,

i replied to your topic directly.