How do I make a bottom fixed position menu in HTML?

Question

I want to create a box-menu on the very bottom of the browser window.

• It should stay at the bottom when the content doesn't fill up the entire screen
• When the content overflows it should only be at the bottom when you scroll down (i.e. you can't see it if you don't scroll).

How do I do this?

Answer 1

I think what you are looking for is called a "sticky footer", and there are a couple of methods. I suggest you have a look at these sites:

• http://ryanfait.com/sticky-footer/
• http://www.cssstickyfooter.com/

Zoom in/out on each site in order to see how this appears when the content reaches the footer or does not.

Both methods fall short on one thing: They require you to know the height of the footer - but I have not seen any better solutions with only CSS.