bootsrap解决悬浮层(悬浮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文件

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

你可能感兴趣的:(JavaEE-Web前台,Web前端-CSS,Web前端-Html)