一、原理

使用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. [Cypress] Find Unstubbed Cypress Requests with Force 404

    Requests that aren't stubbed will hit our real backend. To ensure we've stubbed all our routes, we c ...

  2. Luogu P4336 [SHOI2016]黑暗前的幻想乡 矩阵树定理+容斥原理

    真是菜到爆炸....容斥写反(反正第一次写qwq) 题意:$n-1$个公司,每个公司可以连一些边,求每个边让不同公司连的生成树方案数. 矩阵树定理+容斥原理(注意到$n$不是很大) 枚举公司参与与否的 ...

  3. react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)

    react-native-page-listview 对ListView/FlatList的封装,可以很方便的分页加载网络数据,还支持自定义下拉刷新View和上拉加载更多的View.兼容高版本Flat ...

  4. dijkstra之zkw线段树优化

    其实特别好理解,我们只要写一个数据结构(线段树)支持一下操作: 1.插入一个数\(x\). 2.查询当前数据结构中最小的数的插入编号. 3.删除插入编号为\(x\)的数. 第一眼看成可持久化了 其实就 ...

  5. python音频处理

    第一步:先下载ffmpeg-->下载链接 下载好解压到某个文件夹,并将该文件夹中的bin目录添加到系统path. 第二步:安装pydub pip3 install pydub # -*- cod ...

  6. C#实现代码生成器

    最近在用layui做后台管理,增删改查这些一成不变的东西写起来浪费大量时间,于是做了个简单的代码生成器快速生成 代码生成器的原理其实很简单,都是基于模板实现替换,Razor是个不错的选择(或者Nvel ...

  7. Robot Framework（七）创建用户关键字

    2.6创建用户关键字 关键字表用于通过将现有关键字组合在一起来创建新的更高级别关键字.这些关键字称为用户关键字,以区别于 测试库中实现的最低级库关键字.创建用户关键字的语法与创建测试用例的语法非常接近 ...

  8. dcokee 安装 nginx

    1,docker pull openresty/openresty 2, mkdir  /opt/local/openresty  等等文件夹 3, docker run  --name=" ...

  9. 让一个小的div在大的div中居中显示

    原文 实现原理是设置margin自动适应,然后设置定位的上下左右都为0. 就如四边均衡受力从而实现盒子的居中: 代码: .parent { width:800px; height:500px; bor ...

  10. Docker 数据管理（Volumes）

    Docker 容器产生的数据在可写层,如果不通过 docker commit 生成新的镜像,使得数据成为镜像的一部分保存下来,那么当容器删除后,数据自然也就没有了. Docker 提供了三种数据 Mo ...