页脚紧贴页面底部相信我们前端经常要使用，这里自己总结了下各个方法并简单介绍了下原理及注意点，大家可根据各优缺点进行取舍：
<!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紧贴页面底部；2、注意点父元素别忘记使用position:relative；<!--<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
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。