前言
很多同学在使用css+html写页面的时候，可能会遇到这样的场景：
页面除了头部和底部外，中间部分的内容为空时，页面就会出现底部向上顶，也就是头部和底部黏在一起了。
最近开发页面，也遇到了这个问题，经过查阅很多文章和资料后，整理出这篇文章，希望对大家有用。
我们权且把这种解决方案叫：css sticky footer
术语解释
css sticky footer 顾名思义就是使用css来实现有粘性的置底元素。
下面就为大家讲讲几种解决方案，以及这些解决方案的优缺点和兼容性。
方案一 利用margin负值和伪元素实现永远置底
这个方案主要是利用三个地方：
html和body元素设置高度100%；
主容器内部设置最小高度为100%，并使用伪元素after撑开一定高度（此高度须与置底元素高度一致），使用margin（这里设置的值也应该与置底元素高度值一致）进行抵消；
置底元素设置一个固定高度
代码如下：
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
this is header
</header>
<main class="container">
this is main
</main>
<footer>
this is footer
</footer>
</body>
</html>css
html,body {
height: 100%;
}
.container {
min-height: 100%;
margin-bottom: -50px;
background-color: #000;
}
.container:after {
display: block;
content: " ";
}
.container:after, footer {
height: 50px;
}
footer {
background-color: #f00;
}搞定！就是这么简单~~~
方案预览
http://runjs.cn/detail/de3rw5qq
方案兼容性
pc
IE 8+
Edge 12+
Firefox 2+
Chrome 4+
Safari 3.1+
Opera 10.1+
移动端
IOS safari 3.2+
Opera mini 全线支持
Android 内置浏览器 2.1+
Blackberry browser 7+
Opera Mobile 12+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 10+
方案优缺点
优点
兼容性较好，基本现代浏览器都是可行的，不过不兼容IE 8以下
实现简单，只需要简单设置根元素，主容器元素和置底元素几个即可实现；
无需特殊的页面结构，只要设置与置底元素之间的关系即可实现
纯css实现方案！
缺点
需要知道置底元素的高度，且不能修改；
主模块的高度设置为100%，如果遇到不需要100%高度的场景，此方案就得做另外的修改；
方案一总结
总的来说，此方案对于不需要兼容太低版本浏览器的场景是足够用了，兼容性属于比较好的，实现起来也比较方便。
方案二 利用flex特性实现永久置底
本方案只需要两步：
设置主容器的display方式为flex
设置置底元素flex为1
上代码：
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
this is header
</header>
<main class="container">
this is container
</main>
<footer>
this is footer
</footer>
</body>
</html>css
html{
height: 100%;
}
header{
background-color: #000;
}
.container{
min-height: 100%;
display: flex;
flex-direction: cloumn;
background-color: #fff;
}
footer {
flex: 1;
background-color: #ff0;
}方案预览
http://runjs.cn/detail/rcr6etwv
方案兼容性
pc
IE 10+
Edge 12+
Firefox 28+
Chrome 21+
Safari 6.1+
Opera 12.1+
移动端
IOS safari 7.1+
Opera mini 全线支持
Android 内置浏览器 4.4+
Blackberry browser 10+
Opera Mobile 12.1+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 11+
方案优缺点
优点
使用了css3的新特性，弹性盒子布局，方便快捷；
更少依赖置底元素的高度，这样置底元素的高度不需要知道就可以实现永久置底；
代码实现量更加少。
缺点
显而易见的就是它的兼容性了，IE阵线几乎全军覆没，只剩下10和11能够兼容；
在移动端，要注意各种APP内置浏览器对flex的支持没那么好；
就算是移动端，它的兼容性也可见一斑。
方案三，使用css的calc(),实现永久置底
本方案需要两步：
主元素使用calc设置最小高度
置底元素设置固定高度
上代码
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<header>
this is header
</header>
<main class="container">
this is container
</main>
<footer>
this is footer
</footer>
</body>
</html>
css
.container {
min-height: calc(100vh - 70px);
background-color: #ff0;
}
footer {
height: 50px;
background-color: #f00;
}方案预览
http://runjs.cn/detail/cj5r3srq
方案兼容性
pc
IE 9+
Edge 12+
Firefox 4+
Chrome 19+
Safari 6+
Opera 15+
移动端
IOS safari 6.1+
Opera mini 全线不支持
Android 内置浏览器 4.4+
Blackberry browser 10+
Opera Mobile 37+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 10+
方案优缺点
优点
css代码量极少
html结构代码也简单
缺点
兼容性差
