页脚不会显示在浏览器页面的最底部

Question

我已插入页脚但是当我打开网页的预览时，页脚位于底部，但是一旦我向下滚动它就会粘到页面中的一个位置。 我不希望它被修复或粘滞，只是想让用户滚动到页面底部时查看它。

这是我的html中的页脚div标签

<div id="footer">
 FOOTER
</div>

此页脚的css如下

#footer {
    height: 50px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
}

https://jsfiddle.net/5cewo3h2/

我不知道我是否在页面上的其他位置有问题导致页脚停留在一个位置而不是移动到页面的最底部，但是对此有任何帮助将不胜感激。

Answer 1

摆脱绝对定位。只需将div放在底部（在你的内容div下），它就会在它们下面呈现。

#footer {
    height: 50px;
    left:0px;
    width:100%;
}

Answer 2

您需要将页脚元素移动到网格中。

移动：

<div id="footer">
    FOOTER
</div>

到HTML中最后两个div之间的位置：

    </div>

 <div id="footer">
    FOOTER
   </div>

</div>

    </center>

DEMO：https://jsfiddle.net/5cewo3h2/1/