一、原理

使用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. BZOJ 3630: [JLOI2014]镜面通道 (网络流 +计算几何)

    水能流过的地方光都能达到 呵呵.jpg 那就是裸的最小割(割开上边界和下边界)了- 判矩形和圆相交的时候就用圆心对矩形求一次点到矩形的最近距离(类似KD树的预估函数). CODE #include & ...

  2. Educational Codeforces Round 73 (Rated for Div. 2) D. Make The Fence Great Again(DP)

    链接: https://codeforces.com/contest/1221/problem/D 题意: You have a fence consisting of n vertical boar ...

  3. 数据结构实验之栈与队列一：进制转换（SDUT 2131）

    题目链接 题解: 特判一下n==0的时候. #include <bits/stdc++.h> using namespace std; int a[1000]; int main() { ...

  4. 两个字说清楚编程语言实质－Python基础前传（3）

    大家都知道Python对于数据分析而言,意义重大.但对于运用Python来做数据分析的我们来说,学习一门编程语言,却有不小的难度:首先大部分伙伴不是计算机相关专业的科班出身,其次我们基本上也都没有程序 ...

  5. Java关键字volatile的实现原理（四）

    简述 volatile 是轻量级的synchronized,在多线程开发中保证了共享变量的可见性.可见性就是当一个线程修改一个共享变量时,另一个线程可以读到修改的值.如果volatile变量使用恰当, ...

  6. Palindrome Degree（CodeForces 7D）—— hash求回文

    学了kmp之后又学了hash来搞字符串.这东西很巧妙,且听娓娓道来. 这题的题意是:一个字符串如果是回文的,那么k值加1,如果前一半的串也是回文,k值再加1,以此类推,算出其k值.打个比方abaaba ...

  7. RocketMQ使用记录

    ---恢复内容开始--- he following softwares are assumed installed: 64bit OS, Linux/Unix/Mac is recommended; ...

  8. Netfilter 之 连接跟踪初始化

    基础参数初始化 nf_conntrack_init_start函数完成连接跟踪基础参数的初始化,包括了hash,slab,扩展项,GC任务等: int nf_conntrack_init_start( ...

  9. other备忘

    wps CONCATENATE 只是因为格式 设置成了文本,把这列 格式 设置成 常规,双击下 结果就出来了 https://zhidao.baidu.com/question/21208668961 ...

  10. Redis调试 Centos

    https://zhuanlan.zhihu.com/p/67205845 https://www.cxc233.com/blog/e1d54234.html