页脚未固定到页面底部

Question

我试着让我的页脚粘在页面底部，但是我添加到我身体的内容越多，那么它就越界了。我无法在CSS中看到错误，所以希望你们中的一个能够对它进行排序。

.footer {
    padding-bottom: 0;
    background: gray;
    width: 100%;
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

这是一个JSFiddle：https://jsfiddle.net/367apj76/

非常感谢您的帮助。

Answer 1

从position: absolute;

中删除.footer

<强>更新

您应该使用以下CSS将除页脚之外的所有内容放在div中：

min-height: calc(100vh - *footer-height*px);

并且页脚应该在此div之后。

这样做是因为新的div不能小于窗口大小减去页脚，而是随着窗口的增长而增长（这是vh的用途）。