bootsrap解决悬浮层(悬浮header、footer)会遮挡住内容的方法
来源:互联网 发布:俊知地产 编辑:程序博客网 时间:2024/05/22 11:39
固定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,然后再增加一个与同级的
唯一缺点是不符合语义化,增加了无实质内容的空标签。
代码如下:
```css.footer { position: fixed; right: 0; left: 0; z-index: 1030; bottom: 0;margin-bottom: 0; border-width: 1px 0 0;}
- bootsrap解决悬浮层(悬浮header、footer)会遮挡住内容的方法
- 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧
- tableview header footer 取消悬浮
- iOS UITableView:section的Header以及Footer不悬浮停留在屏幕的方法(非在scrollView代理实现的方法)
- 悬浮层
- 悬浮层
- Silverlight 置于悬浮层之下 背景透明的方法
- 弹出输入法软键盘,编辑框悬浮,及覆盖遮挡问题的解决
- ListView悬浮Header的简单实现
- 设置tableView的header不悬浮
- 如何使UICollectionView的Header悬浮
- tableview header 取消 悬浮
- iOS中tableView每一个section的header的悬浮位置的解决
- 实现悬浮效果的方法
- 悬浮
- 悬浮于页面中间的层
- Fixed固定位置的悬浮div层
- 网页悬浮层
- java虚拟机锁的升级和比较
- MySQL入门之数据完整性约束与表维护
- golang 返回值报错cannot use nil as type string in return argument
- HDU 2795 Billboard(线段树 区间最大)
- 542. 01 Matrix [LeetCode]
- bootsrap解决悬浮层(悬浮header、footer)会遮挡住内容的方法
- 设计模式的六大基本原则:
- Android Studio 骚气的logcat配色
- 【spark,RDD,1】弹性分布式数据集RDD介绍
- 设计模式之装饰者模式
- 14-Vue自定义指令
- 【简记】Java Web 内幕——Cookie与Session简介和使用
- Ubuntu16.04搭建hadoop开发环境
- 2017年7月21日22:38:17