使用绝对位置时，页脚未与屏幕底部对齐

Question

当主容器中存在位置绝对元素时，我无法将页脚粘到页面底部。这是一个fiddle来演示。

<div class="content-wraper">
    <div class="side-nav"></div>
</div>

<div class="footer"></div>​

.content-wraper {
    background-color:blue;
    min-height:100px;
    position:relative;
    width:500px;
}

.side-nav {
    background-color:red;
    height:3000px;
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
}

.footer {
    background-color:black;
    position:absolute;
    bottom:0px;
    width:200px;
    height:50px;
}

Answer 1

将position: absolute;中的.footer更改为position: fixed;

Updated fiddle

---

<强>更新

要使用jQuery将页脚固定在绝对定位的side-nav之下，请尝试以下操作：

$(".footer").css("top", $(".side-nav").height());

Example Fiddle

Answer 2

绝对定位是指窗口大小，而不是内容大小，因此如果内容高于窗口，则无法获得所需的效果。

尝试不同的方法：

sticky footer