粘性页脚（不粘！） [英] Sticky Footer (not sticking!)

问题描述

这里是新手编码器。我一直在试图在我的网站上实现一个粘性页脚，但它根本不工作。基本上，它是一个图像，一些文本绝对放在它。这是我的网站： 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.pngalt =footerclass =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> 
本网站上的所有内容均属于MC航空公司及其子公司，未经MC先生允许，不得使用。只是开玩笑，他可能不会回复 - 只是不要滥用太多:)< / span> 
< / div> 
 
< div id =links2> 
其他链接< br> 
< span class =psmall> 
& nbsp;& nbsp;& nbsp; < a href =>我们的合作伙伴< / a>< br> 
& nbsp;& nbsp;& nbsp; < a href => MC航空公司线索< / a>< br> 
& nbsp;& nbsp;& nbsp; < a href => MC航空公司Wiki< / a>< br> 
& nbsp;& nbsp;& nbsp; < a href =>网络航空公司< / a>< br>< / span> 
< span class =pxsmall> 
我们不对外部网站上的内容负责。我的意思是，只是不公平。 
< / span> 
< / div> 
 
<！ -  #footer close  - > 
< / div> 
  

如果任何人可以指出我做错了，我会非常感谢。 >

谢谢！

解决方案

您的粘帖页面无效， code> position：absolute 来布局您的页面，页脚不知道在文档中的位置。一个快速解决方法是将页脚绝对放置，例如

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

但是我真正推荐的是将 divs ，并使用浮动而不是 position：absolute ，这将解决使用这样的布局将会出现的所有问题，并且语义正确。

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!

解决方案

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.

这篇关于粘性页脚（不粘！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！