为什么我的页脚位于视口底部而不是页面底部？

Question

我有这个小提琴https://jsfiddle.net/acafLy9h/1/，我试图让我的页脚位于页面底部而不是视口。

footer{
  position: absolute;
  background-color:red;
  bottom: 0;
  width:100%;
  height: 60px;
}

我已经在这里和网上查看过类似的其他一些问题，他们建议删除position: absolute;但是当我尝试这个时它没有帮助。有什么建议吗？

Answer 1

我会删除

position:absolute

来自页脚以及主要内容类

Answer 2

删除absolute个元素。它更好

这里是更新的小提琴https://jsfiddle.net/acafLy9h/10/

我也修改了你的HTML。请检查

Answer 3

你有两个“奖金div”。如果您删除最后两个</div>或将开放<div>放在正确的位置，它将像魅力一样工作。问题是你不打开它们只关闭它们。

Answer 4

您必须在页面底部声明固定到固定页脚的位置。

footer {
    position: fixed;
    background-color: red;
    bottom: 0;
    width: 100%;
    height: 60px;
}