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