sticky footer 布局

一、stick footer 布局介绍

文档包括内容区与页脚区。当内容高度未达到视口的高，页脚一直在视口最底部。当内容高度达到或者超出视口的高，页脚一直在内容下方

解决方案

一、calc 目前最主流方案

容器100vh - 页脚的高 （100vh:视口的高）

二、padding-bottom

给body、html设置高度 100%，给内容区设置最小高度 min-height：100%。页脚想在视口显示，则给其margin-top 负的自身高度。（其实页脚是占了内容的自身高度的）为解决内容区高度超过视口高，会与页脚重合问题，给内容区的子元素一个padding-bottom：页脚的高。

三、思路与第二个一样，解决内容区高度超过视口高，会与页脚重合问题：

给内容内部专门一个空子元素让其高度与页脚一致。这样与页脚重合时，在视觉上是没有问题的。