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

Answer 2

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

#SiteFooter {
    position: relative;
}

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

为什么页脚不会到达页面底部？

2 个答案: