移动端解决悬浮层（悬浮header、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，当然有的时候还是需要具体情况具体分析。

法二：

其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面：

　…
　…

我是内容

在文件中添加下列样式代码：

.navbar-fixed-top ~ .content {   padding-top: 70px;}.navbar-fixed-bottom ~ .content {  padding-bottom: 70px;}

 

法三.增加同级占位符

　　个人认为这个方法最为实用，在块之外再包裹一层div，然后再增加一个与同级的

块，这个

块的高度设置为与同样高，不包含任何内容，这样就可以起到一个占位符的效果，在页面最底占据与同样高度的空间，当然页面滑到最下方，原本的悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。代码如下：

　　唯一缺点是不符合语义化，增加了无实质内容的空标签。

复制代码

代码如下:

 

回复主题

 

附footer的一般写法：

```css.footer { position: fixed; right: 0; left: 0; z-index: 1030; bottom: 0;margin-bottom: 0; border-width: 1px 0 0;}