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

Question

当主容器中有绝对位置元素时，我无法让页脚粘在页面底部。这是一个要演示的小提琴。

<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;_.footerposition: fixed;

更新的小提琴

---

更新

side-nav要使用 jQuery将页脚始终低于绝对定位，请尝试以下操作：

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

示例小提琴

Answer 2

绝对定位是指窗口大小，而不是内容大小，所以如果内容高于窗口，就不会得到你想要的效果。

尝试不同的方法：

粘性页脚