有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来，如图：
有的同学可能会想用position:fixed;bottom:0;来永远居底。但有些场景确实不适合。
这是我从YII2中找到的简单解决方案
原理是将最外围的容器.warp 设置最小高度为100%，并且使用margin:0 auto -60px 将页脚吸上来。如图：
demo：主要看CSS部分
<html> <head> <meta charset="UTF-8"> <title>css - 紧贴底部的页脚</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> </head> <style type="text/css"> .wrap { min-height: 100%; height: auto; margin: 0 auto -60px; padding: 0 0 60px; } .footer { height: 60px; background-color: #f5f5f5; border-top: 1px solid #ddd; padding-top: 20px; } </style> <body> <div class="wrap"> <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button><a class="navbar-brand" href="#">My Company</a> </div> <div id="w0-collapse" class="collapse navbar-collapse"> <ul id="w1" class="navbar-nav navbar-right nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> </div> <footer class="footer"> <div class="container"> <p class="pull-left"> © My Company 2017 </p> <p class="pull-right"> Powered by <a href="#" rel="external">Yii Framework</a> </p> </div> </footer> </body> </html>
demo2: flex解决方案，将上面demo的css换成以下即可。
<style type="text/css"> body { display: flex; flex-flow: column; min-height: 100vh; } .wrap { flex: 1; } </style>