一、stick footer 布局介绍
文档包括内容区与页脚区。当内容高度未达到视口的高,页脚一直在视口最底部。当内容高度达到或者超出视口的高,页脚一直在内容下方
解决方案
一、calc 目前最主流方案
容器100vh - 页脚的高 (100vh:视口的高)
二、padding-bottom
给body、html设置高度 100%,给内容区设置最小高度 min-height:100%。页脚想在视口显示,则给其margin-top 负的自身高度。(其实页脚是占了内容的自身高度的)为解决内容区高度超过视口高,会与页脚重合问题,给内容区的子元素一个padding-bottom:页脚的高。
三、思路与第二个一样,解决内容区高度超过视口高,会与页脚重合问题:
给内容内部专门一个空子元素让其高度与页脚一致。这样与页脚重合时,在视觉上是没有问题的。