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!
Related
I'm trying to achieve the solutions for sticky header and footer from here, and centering content vertically from here.
However I'm unable to get the content centered.
Here's my experiment.
Should I use a simple table instead?
You can achieve it using "calc" and "Flexbox" instead of using table. But it may require some css skill since flex-box is quite new.
Check out this link - http://liveweave.com/5a83eG
Since I'm new in stackoverflow, I can't post more than 2 links. I guess you may google more details about "calc" and "flexbox".
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 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.
I´ve been searching the interweb for two days, but have not been able to figure this out. I am making a webpage with loads of included php files, and I have been asked to make a footer with contact information etc.
The problem is that i can´t get the footer to stick to the bottom, and I have discovered that it´s because the body doesn´t extend all the way to the bottom of the page.
See this link for a solution: http://ryanfait.com/sticky-footer/
Made with pure CSS :)
The body element doesn´t have a height like you think of it, it is as height as the elements in it.
I have found a link that perfectly answers your question, that is "Stay On Top" script at http://www.dynamicdrive.com/dynamicindex17/stayontop.htm
There's this bug that I can't seem to fix where IE cuts off part of my text if I leave the footer in the same exact place as the main page. The following are examples of my main page footer position and the subpage footer position. I was wondering is it bad design to move the footer position this way? (the flow of the site fits better with the moving of the footer though)
Main page: http://www.sixfoldstudios.com/stars/index.html
Subpages: http://www.sixfoldstudios.com/stars/home.html
Thanks!
The footer doesn't look all that different except that it is smaller on the subpages. This is not a bad design decision.
As long as the footer looks the same overall and doesn't throws the text around it should be okay. People don't really look at the footer unless they need something from it so I'm sure most visitors won't even notice.
I am not a designer, so I can't answer you from this scope. But as user, I can't say that looks bad, your footer doesn't include any great information for the end user, that will visit just the website, I doubt if most users even check it. Of course the things change if you had a sitemap. Also big sites use different position for footers, here an example of ebay.
Homepage: http://www.ebay.com/
Answers Center: http://pages.ebay.com/community/answercenter/index.html
I would keep the footer the same everywhere. The reason why you might have a problem is because your footer div is in the rightcontent div.
Just move it outside just before the closing div of your container and if text overlaps it set the css to clear:both;
I have two sets of class for both me mainpage & subpages footer at times & it doesn't bother me much as long it does it work ^_^