Page is a not externally linkable
- Code, Content, and Presentation
---- 100% Height Sticky Footer
alt131 - 9:32 pm on Feb 11, 2011 (gmt 0)This was an issue when deciding between solutions, and I posted one that didn't cause that. However, there are some differences between my posted code and my "final draft", so I'll go back and double-check I didn't mess up when posting.
Hi tracidtrax, Appreciate you are trying to be helpful, but no need for your actual page and images - per the forum charter [webmasterworld.com], what we need is code.
Ah yes ... a WebmasterWorld "gotcha" - code only works for one line ;) Try quote.
|Im still trying to work out how to post as "code" but the code tags didnt work in my 1st post |
Ok, some thoughts:
|the page seems to be working quite fine on firefox but on opera and IE the footer is below the viewport |
Always Validate [validator.w3.org] your code. You have a list without list-items, and a malformed link. I don't think they are causing the problem, but they won't be helping. It is easy to make typo's when working with code, so validate often, especially when code isn't behaving as you want.
When the total height of the header + sidebar, or header +content exceeds the total height of the viewport the footer will be forced below the fold. This was the case for me with the code you just posted, so in that regard it is ff, not the others, not behaving as desired. However, I checked, and even with a lesser total height the footer was still below the fold. That's the exact issue I tried to avoid, so I'm going back to investigate what I did between final draft and posted code per #1 of this list.
The solution was based on your content having a greater total height than sidebar. The code needs to be adjusted if sidebar will actually be longer.
A few posts ago you commented that you couldn't get help in other forums. I suspect the reason is that this looks easy, but is actually complicated. That is because you are asking the browser to:
(a) measure the viewport and draw the footer at the bottom of the viewport
(b) Measure the html document and draw the footer at the bottom of the html document
(c} Compare these two different things and make the right decision
(d) Using css, which is desgned to style html elements
It's quite possible, but means solutions "break" when components are changed. You've tackled something quite hard to start, but stick with it - you'll have learned so much by the time this is working in the way you want.
Thread source:: http://www.webmasterworld.com/css/4261456.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com