I am trying to implement a sticky footer on my site. But all the time when I fix it for one page, it breaks on the other page.
As if the current situation on the homepage there is a white space below the footer. But on this page it is looking fine.
I am looking for sollution to work on all pages.
Thanks very much.
The footer is not sticky on either page.
Follow the instructions here to create a sticky footer: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I have used this pattern on multiple sites and it works great.
Simple sticky footer guide here!
http://css-tricks.com/snippets/css/sticky-footer/
Have fun
( Sorry I know this is more a commentaire then a answer but I can't post commentaire yet! )
You need to position that element as fixed. Then set bottom: 0, also since it looks like it spans across the window, set left: 0 and right: 0. Also, might need to up the z-index value.
Related
Well I know there are a million questions regarding this topic - but I haven't found an answer for my specific case.
I am wanting to create a sticky footer (not position: fixed) but one that will stay at the bottom if the content isn't sufficient to fill the page space. If there is enough content the footer will act as normal.
Well on other pages not using bootstrap I have been able to do this:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
See it working on my site here:
http://www.magnetize.ca/policies.shtml#/pp
But on part of my site I am forced to use bootstrap and when I try the flexbox method things go really wrong:
http://my.magnetize.ca/knowledgebase.php
On most browsers I only see the footer get cut off on that page - but on Safari things get seriously messed up.
So, to summarize, I am looking for:
A sticky footer solution that:
Isn't the fixed footer solution (acts as a normal footer if content is sufficient to fill page)
Doesn't require a fixed footer height
Works with bootstrap
Any help you could give me with this specific problem?
EDIT:
I am just trying out the "table trick" method as listed:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
It is live now at: http://my.magnetize.ca/knowledgebase.php (on all my.magnetize.ca pages)
It is working much better than flex-box so I have ditched that idea. Everything is working beautifully on all browsers...except safari. On safari there are massive margins at the top and bottom of the page even though no margins are set.
You could try using http://stickyjs.com/ I have used it for navigation bars that start in the middle of the page and then stick to the top.
I also found this http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/# which looks more like what you are looking for.
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
I'm struggling to get the organization correct for a sticky footer. I'd like it to stay at the end of the page if the container above does not reach it. It's a sticky footer, correct? I've looked at examples and can't figure out where I've went wrong.
http://bootply.com/71311
You can use this
http://ryanfait.com/sticky-footer/, it is easy to add to a site and has a demo file.
Actually, this one works better: http://www.cssstickyfooter.com/ than the one from Ryan Fait. Simple and clean!
I know, I know, I asked this question before. Unfortunately, I lost my work. I started over and I came back to my old post (min-height:100% doesn't work on my container?) and couldn't remember what the trick actually was.
So I will post the link to my "experiment" here and I hope that you guys (or girls) can help me out, the problem is: I want the footer to be at the very bottom and the content and the two sidebars to connect to the top of the footer. (Also, the scrollbars have to disappear, haha)
http://www.jbehrens.nl/test/index.html
If anyone's able to help me, it's very much appreciated!
Set the footer to have
position: fixed
bottom: 0
And then set a height for your side bars and content pane and you might want to set
overflow: scroll
for the side bars and the content pane.
I've seen Ryan Fait's method for sticky footer as well as one here and here.
Why are these people making templates for sticky footers when #footer{position:fixed; bottom:0;} will suffice?
EDIT:
I will add that using position: fixed; for a footer does break margin: auto; centering in (at least) some browsers, thus creating the need for a wrapper tag. Part of my problem with the above mentioned methods is the extra tags which are confusing, syntactically incorrect (for the "HTML purists") and it eats bandwidth. However, a single wrapper around the footer is still, in my opinion, better than a whole jumbled page template to have to start with. And, "my" way is still more straightforward and eats less bandwidth.
The difference between using position: fixed and Ryan Fait's method1 is pretty fundamental.
When using position: fixed, the footer is always visible, and that's not what a sticky footer is trying to do.
The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height. In that case, the sticky footer will act like a normal footer, appearing just below the page content.
Here you can see the effect of a sticky footer. In the Result window, you see that the footer stays at the bottom of the page. Click on the 'Add content' button to add content, and then you will see that the footer shifts down to stay below the content.
1. This is a snapshot of 10 January 2013 from the Wayback Machine, as Ryan's website itself does not contain the original post any longer.