背景
需求是当页面内容超出一屏的时候,footer跟随内容显示在其下方;当页面内容不满一屏时固定在屏幕的下方。
图形示意
正常情况下,当页面内容过少,footer会跟随内容显示,导致footer下方还会有一些空白,如下图:
而我们想要实现的效果是将footer置于页面的最下方,内容和footer之间留白,如下图所示:
思路
一开始我企图使用css技巧实现上述效果,查找了一些文档(见于博客最下方
),甚至引用了一些第三方插件……
最终还是失败了,可能跟使用的框架有关系吧(我使用的是GATSBY)。
重点来了,我最后的实现手段是使用函数来判断页面的高度,通过操作dom,来添加或移除浮动样式来实现。
现实代码
核心代码:
this.footer