2

Possible Duplicate:
CSS sticky footer

footer problem

I'm having a problem that when there is a small amount of content on the page the footer goes up , and when there is a lot of content on the page , the footer is okay because it is in the bottom.

so i written this code in the footer:

position:absolute;bottom:0px;

and now when there is a small amount of content in the page , the footer is okay! but when there is a lot amount of content in the page , the footer is in the middle of the page

how can i solve this problem?

thank you in advance.

Community
  • 1
  • 1
homerun
  • 19,837
  • 15
  • 45
  • 70

2 Answers2

4

Footer at bottom:

  1. Fixed Footer Height:
    http://jsfiddle.net/EP6Hn/1/
  2. Fixed Footer Height & Vertical Alignment Middle:
    http://jsfiddle.net/KUEYm/
  3. Flexible Footer Height:
    http://jsfiddle.net/QWb4H/
  4. Flexible Footer Height & Vertical Alignment Middle:
    http://jsfiddle.net/QGFAV/
  5. Footer at bottom + PNG background stretches to a height of content:
    http://jsfiddle.net/EXTyU/
Serg Hospodarets
  • 4,658
  • 4
  • 25
  • 31
  • Just ran into the same issue and was about to ask the question, before I realized that this must be a *really* common issue. Thanks for the examples. Oh, and just FYI, the first example can do without the nested `w1` div. See http://jsfiddle.net/EP6Hn/2/ – Edwin May 09 '12 at 04:01
  • Are you sure?) Find 1 difference: http://i.minus.com/irbzPQS9zCCwX.gif – Serg Hospodarets May 18 '12 at 16:22
  • Interesting; it worked fine for Chrome, Firefox, and IE 9 when I tested it. I'll just stick with the nested div then. – Edwin May 20 '12 at 16:56
1

I've had to get the footer to stick to the bottom of the page for a number of my projects. This site has an excellent tutorial http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

The idea behind the tutorial is making sure that the page vertically fills the browser viewport. Once you have that issue solved then your footer will stick to the bottom.

Josh Shindler
  • 11
  • 1