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` 其原理就是

.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;
}