React实现footer在页面没有充满屏幕情况下的适配

背景

需求是当页面内容超出一屏的时候，footer跟随内容显示在其下方；当页面内容不满一屏时固定在屏幕的下方。

图形示意

正常情况下，当页面内容过少，footer会跟随内容显示，导致footer下方还会有一些空白，如下图：

而我们想要实现的效果是将footer置于页面的最下方，内容和footer之间留白，如下图所示：

思路

一开始我企图使用css技巧实现上述效果，查找了一些文档(见于博客最下方)，甚至引用了一些第三方插件……

最终还是失败了，可能跟使用的框架有关系吧（我使用的是GATSBY）。

重点来了，我最后的实现手段是使用函数来判断页面的高度，通过操作dom