Question

我目前正在创建一个滚动（长）页面。我遇到了页脚的问题。由于包装器具有绝对位置，因此页脚位于包装器后面，而不是粘在页面底部。如何才能使我的页脚在所有分辨率下都粘在页面底部？

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

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

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

这会将#footer保持在底部，并将#wrapper保持在它之上。 #wrapper不需要position: absolute。

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

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

1 个答案: