页脚不会转到浏览器页面的最底部

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>

演示： https : //jsfiddle.net/5cewo3h2/1/