一、原理

使用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. 解决document.getElementById("")在IE7中误读成name的bug

    <!DOCTYPE html>      <html lang="en">      <head>          <meta char ...

  2. .net core Areas区域

    //使用MVC app.UseMvc(routes => { routes.MapRoute( name: "areas", template: "{area:ex ...

  3. Vue 项目中对路由文件进行拆分（解构的方法）

    项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...

  4. luogu 1373 小a和uim之大逃离 dp

    有取模操作,所以直接维护模意义下的差即可. Code: #include <bits/stdc++.h> #define M 16 #define N 801 #define ll lon ...

  5. git log/show/HEAD step(2)

    git log can see all commit log #git logcommit 2737cfa37f81810072f074dcf19964be0a5eea2e (HEAD -> m ...

  6. c/c++读取一行可以包含空格的字符串(getline,fgets用法)

    1．char[]型 char buf[1000005]; cin.getline(buf,sizeof(buf)); 多行文件输入的情况: while(cin.getline(buf,sizeof(b ...

  7. 51 Nod 1287 加农炮（单调队列思想+二分）

    1287 加农炮  题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 一个长度为M的正整数数组A,表示从左向右的地形高度 ...

  8. [Luogu] 相关分析

    不想调了 #include <bits/stdc++.h> ; #define LL long long #define gc getchar() int fjs; struct Node ...

  9. [Linux]awk RSTART，RLENGTH

    转自 http://blog.sina.com.cn/s/blog_6d76c7e20102v381.html awk 是一门非常优秀的文本处理工具,甚至可以上升作为一门程序设计语言. 它处理文本的速 ...

  10. go 两个数组取并集

    实际生产中,对不同数组取交集.并集.差集等场景很常用,下面来说下两个数组取差集 直接上代码: //两个集合取并集 package main import "fmt" //思想: / ...