Absolute/Sticky/Floating Header and Footer
Posted under: 
People have been asking me about how to make a footer stick to the bottom of the screen regardless of which vertical position the browser screen is at. In other words, how to create a footer just like how Facebook does it.
First of all, there are two different types of footer which I’d like to classify them as Floating Header Footer and Sticky Header Footer.
Sticky Header Footer
There’s nothing special about sticky header, it’s just a header that appears at the top of web broswer screen and doesn’t follow (means it will disappear) when user scrolls down the screen. It sticks to the top of a webpage.
Sticky footer will behave in two ways. If a webpage content does not fill the height of user’s browser screen, it will fill the empty space (means footer will be pushed to the bottom of browser screen) and footer will appear as if it sticks to the bottom. If a webpage content is longer than the height of user’s browser screen, it acts the same way as the normal footer.
Floating Header Footer
The best example for floating footer would be Facebook. There is this footer bar which always appear at the bottom of your screen whenever you scroll your web browser screen vertically.
However, it may not work as intended in Internet Explorer 6 (IE6), as expected. In the example below, an ActiveX workaround is shown. You may also want to consider disabling the floating header and footer by changing it to display: none; (as how Facebook did it)
Floating Header Footer Example
Hope this short article accompanied with examples will help some of you out there.
I do not go through the code line by line as I suppose the examples are clear enough to be self-explanatory.
Cheers!
6 Comments + Add Comment
Got anything to say? Go ahead and leave a comment!
Archives
- July 2011
- June 2011
- May 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- March 2010
- February 2010
- January 2010
- December 2009
- September 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
[...] adorr.net » Absolute/Sticky/Floating Header and Footer [...]
hi! would love to see your Floating Header Footer Example when it is available. the link above:
http://adorr.net/2010/wp-content/uploads/2010/03/floatingfooter.htm
returns page not found…
hi bodhi, thanks for pointing that out! the url was mistakenly typed
hope it helps
Fantastic, Many thanks.
Hi there! been trying out the floating header and footer for iphone , but it seems that it cannot work on iphone
actually i need to build a website to cater for both desktops and mobile devices, so i need the floating header and floating footer, but it sticks to the orientation when first loaded, which i wanted it to be, but then, it sticks to the content and scroll with the content, can you please advise me what to do if you have the time to? thanks in advance dorr! 
Cheers
Is there a way to make the Floating Header Footer Example’s Header Content Centered to the page?