Sticky footer布局是什么？
我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是sticky footer布局。
图示说明
当内容较少时，正常的文档流效果如下图
在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，这时就要用到Stickyfooter布局。
Sticky footer布局效果如下图
这样就符合我们的预期效果，可以看出Sticky footer布局的应用场景还是非常广泛的。
实现方式
负margin布局方式
html代码：
绿色大气茶叶网站源码下载1.0
下载
PHPWEB绿色大气茶叶网站源码下载，源码为PHPWEB 2.05 的商业版。本来是为某人制作的网站，在制作之前，问及什么要求。说是没要求，然后按照某某网站来做即可。（即这套程序的1.X的版本）。我再三确认是否有别的要求。都说没有，然后在发给他看的时候又说不满意，完全和那边的站点一样。哎哟我的妈，当初要求就这样，我不按照这个来做怎么做？现在免费发布出来给大家吧！
// 这里是页面内容
css代码：
.wrapper {min-height: 100%;}.wrapper .content{padding-bottom: 50px; /* footer区块的高度 */}.footer {position: relative;margin-top: -50px; /* 使footer区块正好处于content的padding-bottom位置 */height: 50px;clear: both;}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;}注意:content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。
这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。
flex布局方式
html代码：
这里是主要内容
css代码：
.wrapper {display: flex;flex-direction: column;min-height: 100vh;}.content {flex: 1;}.footer {flex: 0;}这种布局方式结构简单，代码量少，也是较为推荐的布局方式。
小结
Sticky footer布局是十分常见的一种页面布局形式，实现的方法也比较多，以上两种方法最为常用，且基本可以满足所有应用场景。
