Блог

Вот JSFiddle:http://jsfiddle.net/W2UvH/1 /

Очень простая реализация липкого нижнего колонтитула, который должен прилипать к нижней части экрана, когда высота содержимого меньше высоты экрана. Но если высота содержимого выходит за пределы высоты экрана, то нижний колонтитул должен следовать за ним.

Я не понимаю, почему мой нижний колонтитул останавливается на полпути вверх по экрану.

HTML:

 <div id="Canvas">
 <div id="Container">
   <div id="Wrapper"> 
   </div>
 </div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
  

CSS:

 body, html {
        height: 100%;
}

#Canvas {
    position: relative;
    min-height: 100%;
}
#Container {
    margin: auto;
    background-color: #CCC;
    max-width: 802px;
    padding: 15px 0;
}
#Wrapper {
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    width: 730px;
    background-color: #999;
    border: 1px solid #DEDEDE;
    overflow: hidden;
    height: 1000px;
}
#SiteFooter {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 9000;
    background-color: #FF00FF;
    height: 45px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #E0E0E0;
}
  

Я вижу, что все остальные ваши элементы имеют относительные позиции. Итак, не уверен, какова ваша точная реализация, но:

 #SiteFooter {
    position: relative;
}
  

Приведенный выше код также должен сделать это за вас.

Вы хотите, чтобы позиция была фиксированной, а не абсолютной.

 #SiteFooter {
    position: fixed;
}