一、原理

使用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. 洛谷P1052 过河【线性dp】【离散化】

    题目:https://www.luogu.org/problemnew/show/P1052 题意: 青蛙要从0跳到超过$l$的地方,每一次可以跳$s$到$t$之间的任意数. 在河中有m个石头,要求在 ...

  2. sb 的长度 和 文件大小

    StringBuilder sb = new StringBuilder(); ;i<;i++)  //1 0000 0000  1亿项 { sb.AppendFormat("{0}, ...

  3. Codevs 1331 西行寺幽幽子(高精度)

    1331 西行寺幽幽子 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在幻想乡,西行寺幽幽子是以贪吃闻名的亡灵.不过幽幽子可不是只 ...

  4. Java开发中使用事务

    一.      XML,使用tx标签配置拦截器实现事务 二.      Annotation方式 一.XML,使用tx标签配置拦截器实现事务 中主要配置中是tx:advice和aop:config两个 ...

  5. NVMe Windows 支持情况

    From NVMe 官网: Windows Driver – Microsoft Inbox • Closed source driver (Microsoft)• Inbox driver to W ...

  6. Depth from Videos in the Wild 解读

    2019年7月17日11:37:05 论文 Depth from Videos in the Wild: Unsupervised Monocular Depth Learning from Unkn ...

  7. Java基础语法n

    BK      分段函数(SDUT 2257) import java.util.*; public class Main{ public static void main(String[] args ...

  8. node.js由浅入深教程

    https://blog.csdn.net/qq_39985511/article/details/80075051

  9. H5页面验收流程及性能验收标准

    1,接入方需要保证H5页面兼容性.功能正常以及满足H5约束规范 2,有支付功能的必须要有订单业务以及订单入口,存在有效订单 3,提前X个工作日提交验收,需要抄送相关设计.产品.H5性能验收负责人进行验 ...

  10. moveUp()

    这个函数内容有点多,想讲一下大概思路: 向上移有两种情况1.前面为空白 这种情况有两个步骤 (1)将人当前的位置设置为空白(0), (2)再讲人前面的位置设置为人(2)2.前面为箱子 当前面为箱子时有 ...