footer.php 固定底部,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;

}