CSS实现footer“吸底”效果

[Samgao0312]

需求背景

最近做了一个新项目官网，除顶部导航和底部footer外中间部分是通过请求拉取得到的，这样就有个问题——在页面初始化或其他操作刷新时中间主题部分并没有足够多的内容吃撑整个页面。出现的情况就是在初始化过程中主体部分信息还未拉取渲染出来时底部footer顶到顶部导航下面了。。

Tip: 实际上footer始终居底显示效果已经不知道写过多少遍了，也可能因为老了把记性不好了，太久没写了就忘了。工作中遇到记录下来回来重新整理记录加深下理解。

目标

当主题内容区域的内容较少时，footer始终居底显示在屏幕的最下方。
当主体区域内容较多时，footer随着主题内容区增高而撑开，始终显示在页面的最底部。

实现

参看阅读

https://juejin.im/post/5bbc9cb4f265da0add51dc0f#heading-6