固定Footer

很多情況之一，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更為常見。Bootstrap框架提供了兩種固定導航條的方式：

?? ???.navbar-fixed-top：導航條固定在瀏覽器窗口頂部

?? ???.navbar-fixed-bottom：導航條固定在瀏覽器窗口底部

使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可：

　…我是內容…

實現原理：

實現原理很簡單，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性，并且設置navbar-fixed-top的top值為0,而navbar-fixed-bottom的bottom值為0。具體的源碼如下：

/源碼請查看bootstrap.css文件第3717 行～第3738行/

.navbar-fixed-top, .navbar-fixed-bottom {position: fixed;right: 0;left: 0;z-index: 1030; } @media (min-width: 768px) { .navbar-fixed-top, .navbar-fixed-bottom {border-radius: 0;} } .navbar-fixed-top {top: 0;border-width: 0 0 1px; } .navbar-fixed-bottom {bottom: 0;margin-bottom: 0;border-width: 1px 0 0; }

存在bug及解決方法:

從運行效果中大家不難發現，頁面主內容頂部和底部都被固定導航條給遮住了。為了避免固定導航條遮蓋內容，我們需要在body上做一些處理：

body {padding-top: 70px;/*有頂部固定導航條時設置*/ padding-bottom: 70px;/*有底部固定導航條時設置*/ }

因為固定導航條默認高度是50px，我們一般設置padding-top和padding-bottom的值為70px，當然有的時候還是需要具體情況具體分析。

第二種解決這個bug方法：

其實除了這種解決方案之外，我們還有其他的解決方法，把固定導航條都放在頁面內容前面：

　……我是內容

在文件中添加下列樣式代碼：

.navbar-fixed-top ~ .content {padding-top: 70px; } .navbar-fixed-bottom ~ .content {padding-bottom: 70px; }

總結:
在Bootstrap中想要固定底部只需添加navbar-fixed-bottom
其原理就是

css.navbar-fixed-bottom{ position:fixed; bottom:0; }附footer的一般寫法： ```css .footer {position: fixed;right: 0;left: 0;z-index: 1030;bottom: 0;margin-bottom: 0;border-width: 1px 0 0; }

總結

以上是生活随笔為你收集整理的footer固定到底部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。