1.将内容部分的margin-bottom设置为负数
<style type="text/css">*{padding:0;margin:0;}html,body{height:100%;}.wrapper{ ???min-height:100%; ???margin-bottom:-50px;/* 等于footer的高度 */}.footer, .push{ ???height: 50px; ???background:red;}</style></head><body><div class="wrapper"> ???<div class="push"></div></div><div class="footer">footer</div></body>2. 将页脚的margin-top设置为负数
<style type="text/css">*{padding:0;margin:0;}html,body{height:100%;}.content{ ???min-height:100%;}.content-inside{ ???padding:20px; ???padding-bottom:50px; ???background:blue;}.footer{ ???height: 50px; ???background:red; ???margin-top:-50px;}</style></head><body><div class="content"> ???<div class="content-inside"></div></div><div class="footer">footer</div></body>3.使用calc设置内容高度
<style type="text/css">*{padding:0;margin:0;}html,body{height:100%;}.content{ ???height: calc(100% - 50px);}.footer{ ???background:red; ???height: 50px;}</style></head><body><div class="content"></div><div class="footer">footer</div></body>4.使用flex弹性布局
CSS 实现footer置底
原文地址：https://www.cnblogs.com/fjl-vxee/p/8641092.html