粘页脚（不粘！）

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

您发布的代码与您链接到的网站不匹配。我的 cmets 基于您的链接，而不是您在此处发布的代码。

1. 将页脚移到#container div 之外。
2. 将.push div 添加到#container div 的底部（页脚现在所在的位置）
3. 将#footer 和.push 的css 规则添加到clear: both;

Answer 2

快速提示...我无法在您的源 HTML 中看到此代码

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

这很重要，因为它有助于将页脚粘贴到页面底部

Answer 3

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

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

但我实际上建议的是正确定位您的divs 并使用浮动而不是position:absolute，这将解决使用这种布局产生的所有问题并且在语义上是正确的。

Answer 4

有一种更简单的方法来制作粘性页脚，它需要更少的代码并且更清楚它是如何工作的。看看http://www.htmltutorialsandtips.com/css-sticky-footer 的教程，看看它是如何工作的。它将带您逐步完成，以便您了解粘性页脚的工作原理，然后可以相应地修改您的代码。这样一来，您就可以将这一概念应用到任何布局中，而不仅仅是对这个问题有答案。