一、原理

使用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. 计数dp做题笔记

    YCJS 3924 饼干 Description 给定一个长度为\(n\)的序列,序列每个元素的取值为\([1,x]\),现在给定\(q\)个区间,求在所有取值方案中,区间最小值的最大值的期望是多少? ...

  2. springAOP分析

    参考https://www.cnblogs.com/liuyk-code/p/9886033.html 在springboot中自动引入了配置文件AopAutoConfiguration @Confi ...

  3. python中函数的参数传递小结

    “”“ 函数的参数 --必须参数,默认参数,组合参数 --函数我作为参数 --对象作为参数 --*args  可变参数 --**kwargs关键字参数 “”” def function1(a,b,*a ...

  4. pypdf2:下载Americanlife网页生成pdf合并pdf并添加书签

    初步熟悉 安装 pip install pypdf2 合并并添加书签 #!/usr/bin/env python3.5 # -*- coding: utf-8 -*- # @Time : 2019/1 ...

  5. 2 MVC设计模式

    0 基础知识 (1)B/S与C/S结构 C/S(客户机/服务器 client/service):分为客户机和服务器两层,应用软件安装在客户端通过网络与服务器通信 B/S(liulanq/服务器 bro ...

  6. Educational Codeforces Round 33 (Rated for Div. 2) C题·（并查集变式）

    C. Rumor Vova promised himself that he would never play computer games... But recently Firestorm — a ...

  7. 人脸检测之Haar-like，Adaboost，级联(cascade)

    最新版本整理完毕,见: http://face2ai.com/MachineLearning-Haar-like-Adaboost-cascade 0:写在前面的话           写在前面的牢骚 ...

  8. HDU 4496 D-City —— （并查集的应用）

    给出n个点和m条边,一条一条地删除边,问每次删除以后有多少个联通块. 分析:其实就是并查集的应用,只是前一阵子一直做图论思路一直囿于tarjan了..方法就是,记录每一条边,然后从最后一条边开始不断的 ...

  9. mysql: error while loading shared libraries: libnuma.so

    安装mysql后,执行初始化配置脚本,创建系统自带的数据库和表时报异常: [root@VM_0_12_centos mysql]# scripts/mysql_install_db --basedir ...

  10. 原生javascript封装动画库

    ****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...