Sticky Footer (not sticking!)

问题

A novice coder here. I've been trying to implement a sticky footer onto my site, but it's simply not working. Basically, it is an image, with some text positioned absolutely on it. Here's my site: http://mc-airlines.hostei.com

As you can see, it's definitely not working!

I'm using this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ to do it. Here's the code relevant to the footer on my site:

* {
margin: 0;
}

body, html {
text-align:center;
border-width: 0px; 
margin:0;
padding:0;
height:100%;
}


#container{
position:relative;
margin: 0 auto -175px;
width:960px;
min-height:100%;
height: auto !important;
text-align:left;
}

#footer{
margin: 0 auto;
text-align:left;
width:960px;
height:175px;
}


#links {
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 23px;
left: 0;
width: 300px;
}

#links2{
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 10px;
left: 310px;
width: 420px;
}

And my html:

<div id="container">

<!-- (site content -->

<div class="push"></div>

</div>

<div id="footer">

<img src="images/footer.png" alt="footer" class="foot"/>

<div id="links">
<script type="text/javascript">copyright=new Date();
update=copyright.getFullYear();
document.write("&copy "+ update + " MC Airlines");</script><br>
<span class="psmall">
All content on this site belongs to MC Airlines and its subsidiaries, and may not be used without prior permission from Mr MC. Just kidding, he probably won't reply - just don't abuse it too much :) </span>
</div>

<div id="links2">
Other Links <br>
<span class="psmall">
&nbsp;&nbsp;&nbsp; <a href="">Our Partners</a><br>
&nbsp;&nbsp;&nbsp; <a href="">MC Airlines Thread</a><br>
&nbsp;&nbsp;&nbsp; <a href="">MC Airlines Wiki</a><br>
&nbsp;&nbsp;&nbsp; <a href="">Cyber Airlines</a><br></span>
<span class="pxsmall">
We can not be held responsible for the content on external sites. I mean c'mon, that's just unfair.
</span>
</div>

<!-- #footer close -->        
</div>

If anyone can point out what I'm doing wrong I'd be very grateful.

Thanks!

回答1:

Your sticky footer is not working because you are using position:absolute to layout your page and the footer does not know where to position itself in your document. A quick fix would be to position your footer absolutely as well, e.g.

#footer {
    left: 50%;
    margin: 0 auto 0 -480px;
    position: absolute;
    top: 1400px;
}

But what i would actually recommend is to position your divs correctly and use floats instead of position:absolute, this will fix all problems that will arise from using such a layout and will be semantically correct.

回答2:

Quick hint...I am not able to see this code in your source HTML

<div class="push"></div>

This is important cause it helps to stick the footer to the bottom of the page

回答3:

Your posted code does not match the site you linked to. My comments are based upon your link, not the code you posted here.

Move the footer outside the #container div.
Add the .push div to the bottom of the #container div (where the footer is now)
add the css rules for #footer and .push to clear: both;

回答4:

There's an easier way to do sticky footers that takes a little less code and is more clear on how it works. Take a look at the tutorial at http://www.htmltutorialsandtips.com/css-sticky-footer to see how it works. It will take you through it step by step so you understand how sticky footers work and can then modify your code accordingly. That way you'll be able to apply the concept to any layout instead of just having an answer for this one question.

来源：https://stackoverflow.com/questions/9270256/sticky-footer-not-sticking

标签

css

sticky-footer