试图将页脚粘贴到页面底部，并用绝对和相对隐藏页脚

Question

代码：https://jsfiddle.net/Nemoko/m8vLprb6/11/

问题：

我尝试将页脚放在页面底部。因为当我必须向下滚动时（当页面中有很多内容时），页脚位于：的位置，但是当我不必滚动时。页脚位置合适

我该如何解决？

我尝试过的事情：

在position:relative;中添加body但是，这会以某种方式将页脚隐藏在页面顶部，并且margin-top不起作用。position:relative;中的设置footer再次显示了它，但是它以某种方式停留在页面顶部

在display:flex; flex-direction:column; min-height:100vh;中添加body这使得页脚再次出现

有人可以帮我吗？我总是以某种方式与css进行斗争，因为它无法按我希望的方式工作]

Answer 1

看来您最大的问题是您在内容和页脚节上使用了绝对定位。设置位置：元素上的绝对位置会将其从document flow中删除。您将更容易地从内容部分中删除绝对位置，然后在Body元素上设置position：relative。我一直发现，最好是谨慎使用绝对定位，这绝对不是最佳做法，并且绝对不适合可能包含任意内容的大内容部分。