有的時候，由於頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來，如圖：
有的同學可能會想用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>