用Bootstrap制作頁面,使用<header><content><footer>結構時會遇到,頁面內容較少,底部欄或頁腳浮到頁面中間。
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>