本文介绍了CSS Sticky Footer实现代码，分享给大家，具体如下：
上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer显示在页面的最底部
以下给出几种实现方案：
1. FlexBox布局
HTML结构如下：
| <body> <div class="header">Sticky Footer</div> <div class="content"> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> </div> <div class="footer"> <p>This is footer</p> </div></body> |
主要CSS如下：
| body{ display: flex; flex-flow: column; min-height: 100vh;}.content{ flex: 1;} |
FlexBox实现就是这么简单，实现效果也贴上来
贴图的效果好像不太好，但是效果是实现了的哦！！！！
2. 经典套路：padding-bottom + margin-top
HTML结构如下：
| <body> <div class="wrapper clearfix"> <div class="title">Sticky Footer</div> <div class="content"> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> </div> </div> <div class="footer"> <p>This is footer</p> </div></body> |
