Why does footer not go all the way to the bottom?

Question

I have a web page as follows: http://www.transeeq.com/health/bq17a.html#

The yellowish footer does not get pushed all the way to the bottom. Any ideas? Here is the CSS code:

#container {
   min-height:100%;
   position:relative;
}

#body {
   padding-bottom:60px;   /* Height of the footer */
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;          /* Height of the footer */
   background:#CCCC66;
}

Answer 1

I just tested it; it extends to the bottom in Chrome, Firefox, Opera, Safari, IE8, IE7, and even IE6. In which browser do you experience this problem, and can you describe your problem in more detail?

Answer 2

It works; your CSS is probably being cached locally. Have you done a forced browser refresh lately? Hit Ctrl+F5.

Answer 3

hi, have you tried floating the footer to the bottom and changing the position to relative?

Answer 4

Try changing the positioning to fixed on the footer... this will fix it to the bottom of the window...

Answer 5

You have "height: 60px;" in #footer. Try making that a smaller number in the .css.

Answer 6

I use this css.

It works very well in IE AND Firefox

Answer 7

Try position: fixed on the footer instead if you want to ensure that it's always at the bottom of the window. Otherwise, to ensure it's always at the bottom of the document, you can keep its position as relative/auto.

Answer 8

Put your footer inside the container div - if you want to have the footer at the bottom of the page (not the bottom of a window) using position:absolute, you need to put it in a relatively positioned div, such as your container.

Have a look at this article

Answer 9

hi...try the sticky footer http://ryanfait.com/sticky-footer/