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;
}
    原文作者:Chao
    原文地址: https://segmentfault.com/a/1190000002886158
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞