It seems to be working just when you scrunch the screen by minimizing it and bring the bottom up using your cursor/mouse to flex the screen to different sizes the footer rides up over the header and content. It does seem to be working for all the current browser versions that are out there.
The thing is will it work for the older legacy browsers that some companies have held onto due to the inability to upgrade their Operating Systems?
Good point. Unfortunately I have not tested this in legacy browsers. I will update the post and make a note that I have only tested in modern browsers.
On my Mac, works great on Chrome and Safari; however, not Firefox 25 (latest version). footer is stuck beneath the content div (as in your starting point image above). Justin, was the height: 100% a fix for Firefox?
I’m using Firefox 25. You demo doesn’t work i.e. the footer isn’t sticking to the bottom of the page. I’m working on an easy solution to this problem too. I’ll let you know what I come up with.
It seems to be working just when you scrunch the screen by minimizing it and bring the bottom up using your cursor/mouse to flex the screen to different sizes the footer rides up over the header and content. It does seem to be working for all the current browser versions that are out there.
The thing is will it work for the older legacy browsers that some companies have held onto due to the inability to upgrade their Operating Systems?
Good point. Unfortunately I have not tested this in legacy browsers. I will update the post and make a note that I have only tested in modern browsers.
It is not working in the demo..
Is it not working in the demo……
On my Mac, works great on Chrome and Safari; however, not Firefox 25 (latest version). footer is stuck beneath the content div (as in your starting point image above). Justin, was the height: 100% a fix for Firefox?
doesn’t work…
I’m using Firefox 25. You demo doesn’t work i.e. the footer isn’t sticking to the bottom of the page. I’m working on an easy solution to this problem too. I’ll let you know what I come up with.
Appears to work in Chrome.
Fixed it. Add height: 100% to the body.
Well Done Justin !
Your fix works in Firefox 25 making this the best footer solution I have yet seen.
Thanks Rafiki.
…. but just as a footnote, beware that adding the HTML5 doctype declaration ” ” to the top of the document, appears to break this in Chrome.
Hey your demo doesn’t work 🙁 Is there an alternative to this method?
Hi Paul – What specifically isn’t working in the demo?