css - 为什么页脚不会转到页面底部？

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;
}

上面的代码也应该为你完成。