sticky footer 的几种实现方法

方法一：利用padding和margin

利用margin

DOM 结构

<div class="content">content</div>
<footer class="footer">sticky footer</footer>


CSS
html,body{
	height:100%;
}
.content{
	min-height:100%;
	margin-bottom:-100px;
}
.footer,.content:after{
	height:100px;  /* 防止动态添加html时造成footer被覆盖 */
}

利用padding,会多一层DOM结构

DOM
<div class="wrap">
	<main></main>
	<footer></footer>	
</div>

CSS
.wrap{
	box-sizing:border-box;
	min-height:100%;
	padding-bottom:100px;
}
main{
	min-height:100%;
}
footer{
	margin-bottom:-100px;
	height:100px;
}

方法二： 利用calc() 属性

.content{
	height: calc(100% - 100px);
}

方法三： flex

DOM 结构 同上
CSS
html{
	height:100%;
}
html body{
	min-height:100%;
	display:flex;
	flex-direction:column;
	
}
.content{
	flex:1; 
}
.footer{
	height：100px;
	flex:none;  /*flex 默认值为0 1 auto */
}

方法四：gird

缺点：兼容性不好

body{
	display:grid;
	grid-template-rows:80px auto 100px;
}

方法五： 绝对定位

DOM结构(随意)
<div class="content">
	i am content
</div>
<div class="footer"></div>

CSS
html{
	min-height:100%;
	position:relative;
}
body{
	margin-bottom:100px;
}
.footer{
	position:absolute;
	height:100px;
	width:100%;
	bottom:0;
}

方法六：table

兼容所有主流浏览器

DOM 结构
<div class="wrap">
	<header></header>
	<main></main>
	<footer></footer>
</div>
CSS
html,body,.wrap{
	height:100%;
}
.wrap{
	display:table;
}
header,footer,.main{
	display:block;  /*IE7 and under*/
	display:table-row;
}
header,footer{
	height:1
}

暂时整理这么多