King Kong King Kong - 8 months ago 85
jQuery Question

How to keep (absolute) footer at the bottom?

I want to keep my footer at the bottom of the page while keeping there position absolute , the have the following page structure :

<div id="head"> </div> //want to keep its size auto and always on the top (position absolute)
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size
changes then footer will also change (position absolute)

How can i do this?


I think i was not clear to my question, sorry for that but my actual problem is that in #main ( height : auto ) the contents are absolute so those contents are not included in the height of main ( i am just guessing this ) thats why the height of main was 0 because of this the footer comes up. This is my actual problem.


Use bottom:0:

#foot {
  position:absolute; /* your requirement, you can also use fixed though */
  /* your other possible styles */

Just keep in mind that for bottom to work, you got to specify the position as you said :)

If you use position:fixed, the footer will still be available on bottom of the page when you scroll but it is up to your requirements.