為Bootstrap新增靜止在頁面底部的導航欄
用Bootstrap製作頁面，使用<header><content><footer>結構時會遇到，頁面內容較少，底部欄或頁尾浮到頁面中間。
wobiji.net 我筆記
testfooter
Bootstrap本身提供了navbar-fixed-top 、navbar-fixed-bottom 、navbar-static-top三種方式使用導航條，卻無法解決此問題，我們需要navbar-static-bottom 。
在網上發現很多相似問題，很多解決方案，但都不是針對Bootstrap。此方案非常簡單，無需jQuery、javaScrapt。
需要新增的css
/* Sticky footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; }
HTML
<html> ... <body> ... <div class="container"> </div> ... <footer class="footer"> ...頁尾內容... </footer> </body> </html>