Footer Issues : Can't Keep it Down_问答_开发者

I have been trying for 2 hours to get my footer to stay at the bottom.

I have been trying "Matthew James Taylors" technique, but no luck.

Anyone see what I am missing or doing wrong?

Here is a Live Example : http://glustik.com/essex/index.html

Any help would be GREAT!

I would attached the CSS Code with the { } but it always br开发者_如何学Goeaks for me.

I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.

Here are some things that are most likely giving you trouble:

Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.

I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.

Best of luck!

EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:

Remove the height and bottom padding from #mainBody

(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.

You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.

try moving it out of #container, or remove the relative positioning from #container

Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.

You have three options:

you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to @Gaby aka G. Petrioli for pointing this out.

I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)

If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.

You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:

http://compass-style.org/reference/compass/layout/sticky_footer/

Make the following changes and it rendered fine in Chrome for me: