页脚紧贴页面底部相信我们前端经常要使用，这里自己总结了下各个方法并简单介绍了下原理及注意点，大家可根据各优缺点进行取舍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
header, article, footer {
border: 1px solid red;
box-sizing: border-box;
}
header, footer {
height: 50px;
}
.flex {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.flex > article {
flex: 1;
}
.grid {
display: grid;
grid-template-rows: 50px 1fr 50px;
min-height: 100%;
}
.grid>footer{
grid-row: 3/4 ;
}
.calc > article {
min-height: calc(100vh - 100px);
}
html, body {
height: 100%;
}
.absolute {
min-height: 100%;
position: relative;
}
.absolute > article {
padding-bottom: 50px;
}
.absolute > footer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.margin {
height: 100%;
}
.margin-wrap {
min-height: 100%;
}
.margin > .margin-wrap > article {
padding-bottom: 50px;
}
.margin > footer {
margin: -50px 0 0 0;
}
.margin-push {
height: 100%;
}
.margin-push > .margin-push-wrap {
margin: 0 0 -50px 0;
min-height: 100%;
}
.margin-push > .margin-push-wrap > .push {
height: 50px;
}
.table {
height: 100%;
}
.table > .table-wrap {
display: table;
width: 100%;
height: 100%;
}
.table > .table-wrap > footer {
display: table-row;
height: 1px;
}
</style>
</head>
<body>
一、flex方法
1、实现原理
主要使用了弹性盒中的 flex: 1属性来实现自适应伸缩
2、注意点
注意兼容性
<!--<section class="flex">-->
<!--<header>头部 flex</header>-->
<!--<article>主要 flex</article>-->
<!--<footer>底部 flex</footer>-->
<!--</section>-->
二、 grid方法
1、实现原理
主要使用了网格布局中的fr单位、grid-row:3/4及min-height:100%实现的；
2、注意点
注意兼容性
<!--<section class="grid">-->
<!--<header>头部 grid</header>-->
<!--<article>主要 grid</article>-->
<!--<footer>底部 grid</footer>-->
<!--</section>-->
三、 calc方法
1、实现原理
calc计算及 vh单位；
2、注意点
注意兼容性
<!--<section class="calc">-->
<!--<header>头部 calc</header>-->
<!--<article>主要 calc</article>-->
<!--<footer>底部 calc</footer>-->
<!--</section>-->
四、 absolute方法
1、实现原理
父元素使用min-height:100%，footer采用相对于父元素的绝对定位，
然后再使用bottom:0；即可让footer紧贴页面底部；然后在article上
使用padding-bottom使得footer正好覆盖该位置；
2、注意点
父元素别忘记使用position:relative，article别忘记使用padding-bottom；
<!--<section class="absolute">-->
<!--<header>头部 absolute</header>-->
<!--<article>主要 absolute</article>-->
<!--<footer>底部 absolute</footer>-->
<!--</section>-->
五、 负margin方法
1、实现原理
靠article的padding-bottom为footer留出空间，再将footer的margin-top设为其自身高度的负值，
这样footer就会上移至article留出的空间内；由于margin-wrap的min-height为100%，
因此footer会永远紧贴在页面底部；
2、注意点
footer不与header及article同级，其需要与他们的父元素同级；
<!--<section class="margin">-->
<!--<div class="margin-wrap">-->
<!--<header>头部 负margin</header>-->
<!--<article>主要 负margin</article>-->
<!--</div>-->
<!--<footer>底部 负margin</footer>-->
<!--</section>-->
六、 负margin+新增元素方法
实现原理
在margin-push-wrap里面的最后子节点新增一个div.push的元素，该元素的高度与footer是一样的，
然后将margin-push-wrap的margin-bottom设置为footer的高度的负值，这样footer就会上移，
正好覆盖住div.push元素；
注意点
footer不与header及article同级，而与它们的父元素同级；
啰嗦几句
1、如果不想新增元素div.push 也可以使用:after的方式来替代
2、该方法是由 Ryan Fait想出来的，不过很可惜他 英年早逝了 愿他在天堂一切安好。
说来也巧，今天正好是他去世3周年纪念日（真的很巧。。。他的个人主页：ryanfait.net）
<!--<section class="margin-push">-->
<!--<div class="margin-push-wrap">-->
<!--<header>头部 负margin加新增元素法</header>-->
<!--<article>主要 负margin加新增元素法</article>-->
<!--<div class="push"></div>-->
<!--</div>-->
<!--<footer>底部 负margin加新增元素法</footer>-->
<!--</section>-->
七、 table方法
实现原理
主要利用 display: table-row 及height:1 的表格属性实现
注意点
footer与header及article同级；
<section class="table">
<div class="table-wrap">
<header>头部 负margin加新增元素法</header>
<article>主要 负margin加新增元素法</article>
<footer>底部 负margin加新增元素法</footer>
</div>
</section>
</body>
</html>
在线预览地址：https://codepen.io/anon/pen/XVmLJK
资料推荐：
1、如何将页脚固定在页面底部
2、再谈等高列布局、水平垂直居中与置顶页脚
3、Ryan Fait's sticky footer, but responsive
4、各种CSS实现Sticky Footer
5、 CSS粘住固定底部的5种方法
网友评论