Absolute/Sticky/Floating Header and Footer

Mar 16, 2010 by     14 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

14 Comments + Add Comment

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


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

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

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

  • 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

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

  • Can I simply say what a relief to uncover an individual who genuinely knows what they’re talking about on the net.
    You actually understand how to bring an issue to light and make it
    important. A lot more people should look at this and understand
    this side of your story. It’s surprising you’re
    not more popular because you definitely have the gift.

    Feel free to surf to my blog post :: Lawn Aeration Castle Rock CO

  • Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something.
    I think that you can do with a few pics to drive the message home a little bit, but instead of that,
    this is excellent blog. An excellent read. I will definitely be back.

    My blog :: e cig reviews 2013; Brenna,

  • It’s actually a great and helpful piece of information. I am satisfied that
    you shared this useful information with us.

    Please stay us informed like this. Thank you for sharing.

  • Furniture companies have dozens of nail guns in their wood shops as a
    result of how great they succeed. Naperville landscapers are a solution for yard landscape and maintenance.

    It’s utilized for everything from sheds, residences and decks to more
    modest occupations, for example cutting the structure wood for a solid walk or the parts for parking space racks.

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

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>