bootsrap解決懸浮層（懸浮header、footer）會遮擋住内容的方法

固定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檔案

.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，當然有的時候還是需要具體情況具體分析。

法二：

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

　…

　…

我是内容

在檔案中添加下列樣式代碼：

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

法三.增加同級占位符      

　　個人認為這個方法最為實用，在塊之外再包裹一層div，然後再增加一個與同級的

　　唯一缺點是不符合語義化，增加了無實質内容的空标簽。

代碼如下:

附footer的一般寫法：