一、原理

使用fixed进行固定定位，相对于浏览器窗口进行定位，然后再设置其z-index的值即可。

二、Bootstrap中使用的类

1.顶部固定：navbar-fixed-top

2.底部固定：navbar-fixed-bottom

 <footer class="navbar-fixed-bottom">

   <div class="container">

     内容区域

   </div>

 </footer>

bootstrap让footer固定在顶部和底部的更多相关文章

  1. html中header,footer分别固定在顶部和底部

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>page01</title> 5 <styl ...

  2. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  3. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  4. html bootstrap 表头固定在顶部，表列 可以自由滚动的效果

    该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/ ...

  5. bootstrap悬浮顶部或者底部

    这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar-inner navbar-fixed ...

  6. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  7. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  8. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

  9. Bootstrap系列 -- 43. 固定导航条

    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定 ...

随机推荐

  1. 【LuoguP4482】[BJWC2018]Border 的四种求法

    题目链接 题意 区间 boder \(n,q\leq 2*10^5\) Sol (暴力哈希/SA可以水过) 字符串区间询问问题,考虑用 \(SAM\) 解决. boder相当于是询问区间 \([l,r ...

  2. vue04

    目录 Vue项目环境 项目的创建 vue根据配置重新构建依赖 pycharm管理vue项目 vue项目目录结构分析 vue项目生命周期 views文件夹内的.vue文件介绍 配置自定义全局样式 导航栏 ...

  3. React生命周期, 兄弟组件之间通信

    1.一个demo(https://www.reactjscn.com/docs/state-and-lifecycle.html) class Clock extends React.Componen ...

  4. PHP实现省市区关键词搜索邮编

    前两天做了一个项目, 其中有一个需求是根据用户输入的关键词查询邮编. 最开始设计的数据库结构是省市区分为三个字段, province, city, area, 但是在写代码实现的过程中发现, 用户只输 ...

  5. MySql大小写配置

    新安装mysql5.7版本后,linux环境下默认是大小写敏感的.可以在客户端执行以下命令: SHOW VARIABLES LIKE '%case%' 可以看到 lower_case_table_na ...

  6. 【Python之路】特别篇--Django瀑布流实现

    瀑布流 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinteres ...

  7. 小程序弹框wx.showModal、wx.showActionSheet、wx.showToast

    wx.showModal wx.showModal({ title: '删除图片', content: '确定要删除该图片?', showCancel: true,//是否显示取消按钮 cancelT ...

  8. Java中可变参数

    从java5开始出现了可变参数,这是对java方法及数组的拓展! 方法中可以接受的参数不再是固定个数的,而是随着具体需求传递的多少来决定. 定义格式: 返回值类型  方法名(参数类型 ... 形式参数 ...

  9. TCP报头格式

    1.端口号:用来标识同一台计算机的不同的应用进程.     1)源端口:源端口和IP地址的作用是标识报文的返回地址.     2)目的端口:端口指明接收方计算机上的应用程序接口. TCP报头中的源端口 ...

  10. python 找出数组重复的元素

    """ 从头扫到尾,只要当前元素值与下标不同,就做一次判断,numbers[i]与numbers[numbers[i]], 相等就认为找到了重复元素,返回true,否则就 ...