Sticky Footer (не прилипает!)

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 правильно и использовать поплавки вместо position:absolute, это будет исправить все проблемы, которые возникают с использованием такого макета и будут семантически правильно.

Answer 2

Ваш код не совпадает с указанным вами сайтом. Мои комментарии основаны на вашей ссылке, а не на том коде, который вы разместили здесь.

1. Переместить нижний колонтитул за пределами #container div.
2. Добавьте .push DIV в нижней части #container DIV (где нижнего колонтитула)
3. добавить правила CSS для #footer и .push к clear: both;

Answer 3

Быстрый намек ... Я не в состоянии увидеть этот код в исходном HTML

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

Это важно потому что это помогает придерживаться колонтитула в нижней части страницы

Answer 4

Есть более простой способ сделать липкие нижние колонтитулы, которые требуют немного меньше кода и более понятны, как это работает. Взгляните на учебник по адресу http://www.htmltutorialsandtips.com/css-sticky-footer, чтобы узнать, как он работает. Он проведет вас через это шаг за шагом, чтобы вы поняли, как работают липкие нижние колонтитулы, и затем можете соответствующим образом изменить ваш код. Таким образом, вы сможете применить концепцию к любому макету вместо того, чтобы просто отвечать на этот вопрос.