css - 粘性页脚(不粘!)

Question

这里是编码新手。我一直在尝试在我的网站上实现粘性页脚，但它根本不起作用。基本上，它是一个图像，上面有一些绝对定位的文本。这是我的网站:http://mc-airlines.hostei.com

如您所见，它肯定是行不通的!

我正在使用这个:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/去做吧。这是与我网站上的页脚相关的代码:

* {
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;
}

还有我的 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> 

如果有人能指出我做错了什么，我将不胜感激。

谢谢!

Answer 1

您的粘性页脚不起作用，因为您正在使用 position:absolute 来布局您的页面，而页脚不知道在您的文档中将自己定位到哪里。一个快速的解决方法是也绝对定位您的页脚，例如

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

但我实际上建议的是正确定位你的 divs 并使用 float 而不是 position:absolute，这将解决使用这样一个会出现的所有问题布局并且在语义上是正确的。