为什么页脚没有到页面底部？

Question

这里是 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;
}

Answer 1

我看到您的所有其他元素都是相对位置。所以，不确定你的具体实现是什么，但是：

#SiteFooter {
    position: relative;
}

上面的代码也应该为你做。

Answer 2

您希望位置是固定的，而不是绝对的。

#SiteFooter {
    position: fixed;
}