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

您发布的代码与您关联的网站不符。我的评论是基于您的链接，而不是您在此处发布的代码。

将页脚移到#container div。
将.push div添加到#container div的底部（页脚所在的位置）
将#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，这将解决因使用这样的布局而产生的所有问题，并且在语义上是正确的。< / p>

Answer 4

有一种更简单的粘贴页脚方法，可以减少一些代码，并且更清晰地了解它的工作原理。请查看http://www.htmltutorialsandtips.com/css-sticky-footer上的教程，了解它是如何工作的。它将逐步引导您完成它，以便您了解粘性页脚的工作方式，然后可以相应地修改代码。这样，您就可以将概念应用于任何布局，而不仅仅是回答这一个问题。

粘性页脚（不粘！）

4 个答案: