Bootstrap靜止在頁面底部的導航欄
阿新 • • 發佈：2019-02-04
用Bootstrap製作頁面，使用<header><content><footer>結構時會遇到，頁面內容較少，底部欄或頁尾浮到頁面中間。
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>看效果
