Absolute/Sticky/Floating Header and Footer

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

float

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.

Cheers!



Related Posts with Thumbnails

12 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:
    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?

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

    #main.column{
    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,

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>