html - 在所有分辨率下强制页脚贴在页面底部

Question

我目前正在创建一个滚动(长)页面。不过，我遇到了页脚问题。由于 wrapper 有绝对位置，页脚位于 wrapper 后面，而不是粘在页面底部。我怎样才能使我的页脚在所有分辨率下都停留在页面底部？

http://jsfiddle.net/Kzh7z/

你可以看到它的蓝色小部分粘在 wrapper 后面。

HTML:

<div id="wrapper">
</div> <!-- end wrapper -->
<footer>
<div id="footer">
<div class="copyright">
<p>footer copyright blah etc</p>
</div>
</div>
</footer>

CSS:

#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: absolute;
}

#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
}

谢谢!

Answer 1

编辑:更新以反射(reflect)评论中讨论的内容。

这将使#footer 位于底部，而#wrapper 位于其上方。 position: absolute 不是#wrapper 所必需的。

#wrapper {
    background: #CCC;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    width: 1000px;
    height: 1200px;
    position: relative;
    overflow: auto;
    z-index: 1;
}

#photoContent {
    border: 10px solid #F5F5F5;
    box-shadow: 0 0 7px;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 781px;
    height: 231px;
    background: #FFF;
    margin-top: 12px;
}

#footer {
    background: #0A59C2;
    border-top: 5px solid #06489E;
    width: 100%;
    height: 85px;
    z-index: 2;
}