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文件第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;
}