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

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

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

Updated fiddle

---

更新

要使用 jQuery 将页脚固定在绝对定位的 side-nav 下方，试试这个:

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

Example Fiddle