[Resolved] Sticky footer

[Damiaan van Vliet]

Hi Tom,
For a site with little text I want to add an stick footer because the footer is too high when visible on a large screen. Also beneath the footer is the background image visible.
I tried css code I found on this support forum but on Safari it is not working, footer is gone.

Do you have a solution or work around? I don’t understand why stick footers are so difficult.

site url: testsite

Thanks!
Damiaan.

• This topic was modified 8 years, 1 month ago by Damiaan van Vliet.

[Tom]

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 🙂

[Damiaan van Vliet]

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.

[Tom]

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%.

[Damiaan van Vliet]

Hi Tom,
I didn’t think it would be weird for you 😉
But thanks for reply and have a nice weekend.

Bye,
Damiaan.

[Tom]

You too 🙂

[Damiaan van Vliet]

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

[Tom]

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.

[Damiaan van Vliet]

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

[Tom]

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

[Oliver]

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

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

[David]

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

[Michael]

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;
}

[Patricia]

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;
}

??

[David]

Hi there,

i replied to your topic directly.

[Author]

Posts