Absolute/Sticky/Floating Header and Footer

Mar 16, 2010 by     10 Comments    Posted under: Web Development


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.

Sticky Header Footer Example

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.


Related Posts with Thumbnails

10 Comments + Add Comment

  • im late to this but thanks! ive been trying to get this to work!

  • Hi, I tried using your sticky footer example and it worked like a charm. But I also need to include a left navigation bar that is parallel to the main content. I tried a lot of things and have not been able to get it to work. The left navigation menu appears after the main content rather than in parallel. I already have the code for the left navigation bar but in that case the sticky footer does not work.

    This is what I tried:

    position: relative;
    float: left;

    Would really appreciate if you could help me put in this left navigation into your existing sticky footer setup. Thanks

  • hey you have a problem and hopefully;) I found the solution was simple Sticky Footer Header

  • Thank you so much! Everything I could find online was just about the “Sticky Header Footer” and I was looking for the “Floating Header Footer.” Now that I’ve seen the solution, I feel a bit dumb because of the simplicity, but I’m still elated that you had it! Thanks!

  • Is there a way to make the Floating Header Footer Example’s Header Content Centered to the page?

  • 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! :)


  • Fantastic, Many thanks.

  • hi bodhi, thanks for pointing that out! the url was mistakenly typed :) hope it helps

  • hi! would love to see your Floating Header Footer Example when it is available. the link above:
    returns page not found…

  • [...] adorr.net » Absolute/Sticky/Floating Header and Footer [...]

Got anything to say? Go ahead and leave a comment!

You must be logged in to post a comment.