sticky footer 的几种实现方法

方法一：利用padding和margin

利用margin

DOM 结构

content



CSS
html,body{
	height:100%;
}
.content{
	min-height:100%;
	margin-bottom:-100px;
}
.footer,.content:after{
	height:100px;  
}

利用padding,会多一层DOM结构

DOM

	

		


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;  
}

方法四：gird

缺点：兼容性不好

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

方法五： 绝对定位

DOM结构(随意)

	i am content



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

方法六：table

兼容所有主流浏览器

DOM 结构

	

	

	

CSS
html,body,.wrap{
	height:100%;
}
.wrap{
	display:table;
}
header,footer,.main{
	display:block;  
	display:table-row;
}
header,footer{
	height:1
}

暂时整理这么多