一、原理

使用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. C++中时间转换

    所需头文件 #include <chrono> #include <time.h> auto now = std::chrono::system_clock::now(); s ...

  2. javascript原型继承

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由 ...

  3. deepin Linux 安装+工作学习配置

    一 安装 在官网下载 U盘安装,神舟优雅x4开机按F7,选择U盘启动. U盘安装器在下载的镜像文件中. 二 配置 升级最新系统 设置root用户密码: dawn@dawn-PC:~$ sudo pas ...

  4. Win10 下载 masmplus

    一.下载: masmplus链接: http://www.aogosoft.com/masmplus/

  5. D. Shortest Cycle（floyd最小环）

    D. Shortest Cycle time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. Java线程间如何通信（五）

    1.简述 线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能称为一个整体. 使线程之间进行通信后,在大大提高CPU利用率的同时还会使开发人员对各个线程任务在处理的过程中进行有效的把控. ...

  7. QT中为程序加入超级管理员权限

    QT的一些文件操作,注册表的操作等,有些操作会无效,主要是因为没有对C盘的相关权限. 解决方法: 1. mingw编译器 在pro工程文件中加入 RC_FILE=main.rc rc文件,之前一篇博客 ...

  8. 空指针/0/NULL

    空指针/0/NULL 空指针是一个被赋值为0的指针,在没有被具体初始化之前,其值为0. NULL 是一个标准规定的宏定义,用来表示空指针常量. #define NULL 0   或者 #define ...

  9. Devops（一）：CentOS7 安装Maven3.6.1详解

    https://yq.aliyun.com/topic/78?spm=5176.8290451.656547.7.rMYhAF https://yq.aliyun.com/activity/155?u ...

  10. [JDBC]批量提交插入语句以提高数据插入速度(效率提升不明显)

    // Initialize conn&stmt Connection conn=null; Statement stmt=null; ... conn=dataSource.getConnec ...