Html 在所有分辨率下，强制页脚粘贴在页面底部

我目前正在创建一个滚动（长）页面。但是我遇到了页脚的问题。因为包装有一个绝对位置，所以页脚在包装后面，而不是粘在页面底部。我怎样才能使我的页脚在所有分辨率下都粘在页面底部

你可以看到它的蓝色部分粘在包装纸后面

HTML:

---

谢谢大家!

编辑：更新以反映评论中讨论的内容

这将使#footer位于底部，而#wrapper位于其上方<代码>位置：绝对对于包装器不是必需的

---

我试过了，但在我看来，让页脚滚动整个页面有点烦人——我不想在浏览网站时看到版权的东西。我只想把它贴在这一页的底部。谢谢。好吧，是的，我误解了你的意思。如果浏览器高度大于1200px，你仍然希望页脚位于页面底部，即使在#wrapper和#footer之间会有一个间隙？嗯，包装器需要有一个较大的高度。我希望包装看起来像是从页脚“出来”的，所以我不希望有间隙。以前，当包装没有绝对位置时，没有间隙。只是好奇，为什么包装必须是

位置：绝对

？查看您的问题时，请查看右侧。在“相关”主题下，你会发现许多与你类似的问题和适当的答案对不起，我下次再做。相关的答案对我并没有多大帮助，但我会看看以前没有看过的答案。

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

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

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