一款经典的stick footer布局
有时候会有需求将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾
第一步,设置子盒子的坐标、位置以及如果长度超过最低高度的的处理
*{ text-align: center; margin: 0; } .wrapper{ position: fixed; top: 0; left:0; width: 100%; height: 100%; overflow: auto; font-size: 20px; background: #00ff00; }
第二步子盒子设置最小高度 给一个padding-bottom 等于footer高度 避免内容将footer遮盖
.wrapper .content{ min-height: 100%; padding-bottom: 50px; }
第三步footer的height和margin-top要相等 且清除浮动
.wrapper .footer{ position: relative; width:100%; height: 50px; margin: -50px auto 0 auto; clear: both; text-align: center; background: black; color:white; line-height: 50px; }
第四步,项目中使用
<div class="wrapper"> <div class="content"> 这里是内容 </div> <div class="footer"> 这里是footer的内容,固定在底部 </div> </div>