一、原理

使用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. Acwing-287-积蓄程度(树上DP, 换根)

    链接: https://www.acwing.com/problem/content/289/ 题意: 有一个树形的水系,由 N-1 条河道和 N 个交叉点组成. 我们可以把交叉点看作树中的节点,编号 ...

  2. 自己总结：汇编CALL和RET指令

    ret指令,相当于 pop IP:修改IP的内容,从而实现近转移 retf指令,相当于 pop IP pop CS:修改CS和IP的内容,从而实现远转移 -------------- CPU执行cal ...

  3. javascript面向对象 用new创建一个基于原型的javascript对象

    //创建一个类 其实就是个对象 var Student={ name:"robot", height:1.6, run:function(){ console.log(this.n ...

  4. Django基础之request对象

    当一个页面被请求时,django就会创建一个包含本次请求原信息的HttpRequest对象. django会将这个对象自动传递给响应的视图函数,一般视图函数约定俗成地使用request参数承接这个对象 ...

  5. [51nod1666] 最大值

    题面 题解 毒瘤题浪费我大好青春 容易知道, 如果\(l\)和\(r\)位数不一样, 直接选形似\(99..99\)的数, 输出答案即可 \(l\)和\(r\)位数一样的话, 当位数确定的时候, 由于 ...

  6. nginx部署前端项目

    1.在阿里云服务器上安装nginx,推荐使用yum安装 yum install -y nginx // 命令安装 nginx 服务器 2.配置nginx 安装完成后,进入 nginx 配置文件目录 一 ...

  7. 【sed】进阶

      sed的基本用法已能满足大多数需求,但当需要时,知道这些高级特效的存在及如何使用将提供莫大的帮助!   1. 多行命令         sed编辑器提供三个用于处理多行文本的特殊命令: N:将数据 ...

  8. LeetCode 124. 二叉树中的最大路径和（Binary Tree Maximum Path Sum）

    题目描述 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经过根节点. 示例 1: 输入: [1,2,3] 1 ...

  9. Qt那点事儿（三） 论父对象与子对象的关系

    第三回 父与子 70后的道友都应该看过这么一部片子叫做<<父子情深>>.讲述的是一个小男孩患了绝症,父亲为了满足他的愿望,让已关门的游乐园为他们父子俩重新开放.在游乐园尽情地玩 ...

  10. 使用注解实现Spring的声明式事务管理

    使用注解实现Spring的声明式事务管理,更加简单! 步骤: 1) 必须引入Aop相关的jar文件 2) bean.xml中指定注解方式实现声明式事务管理以及应用的事务管理器类 3)在需要添加事务控制 ...