前段时间工作中遇到粘性页脚的需求,以前用过JS控制过,最后发现flex布局是解决这类问题的好帮手.
粘性页脚:即使没有足够的内容填充页面，也要将页脚固定到窗口的底部.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box { display: flex; min-height: 100vh; flex-direction: column; } .main { flex: 1; } </style> </head> <body> <div class="box"> <header>header</header> <div class="main">main</div> <footer>footer</footer> </div> </body> </html>
这是个简单的实例.可以扩展到其他布局,例如:侧边布局等等.
参考:https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/