一、原理

使用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. CodeForces 839D - Winter is here | Codeforces Round #428 (Div. 2)

    赛后听 Forever97 讲的思路,强的一匹- - /* CodeForces 839D - Winter is here [ 数论,容斥 ] | Codeforces Round #428 (Di ...

  2. 【leetcode】1295. Find Numbers with Even Number of Digits

    题目如下: Given an array nums of integers, return how many of them contain an even number of digits. Exa ...

  3. java.util.Stack

    import java.util.Stack; public class Test { public static void main(String[] args) { Stack stack = n ...

  4. Elasticsearch7.1中文文档-第一章-入门

    安装openjdk wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-secur ...

  5. 计算(calc.cpp) 这题我搞了2晚上qwq

    终于会了!可喜可贺!可喜可贺!   计算(calc.cpp) [问题描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有“(”,“)” ...

  6. codeforces316E3

    Summer Homework CodeForces - 316E3 By the age of three Smart Beaver mastered all arithmetic operatio ...

  7. jwt token and shiro

    openapi可以完全开放访问,也可以使用jwt token进行简单的认证,还可以使用shiro支持更细致的权限管理. handler.yml配置了security和shiro两个handler: s ...

  8. JVM----双亲委派模型

    加载类的开放性 我们在了解双亲委派模型之前,不得不先了解一下什么是类加载器.虚拟机设计团队之初是希望类加载过程“通过一个类的全限定名来获取描述该类的二进制字节流”这个动作能放到虚拟机外部实现,以便于让 ...

  9. PostgreSQL 当月最后一天的工作日 , 计算日期是星期几

    可以用pg自带函数select extract(dow from current_date),之所以没用主要是展示一下通过数学方法计算日期的原理. drop function if exists ge ...

  10. Rocketmq异步发送消息

    package com.bfxy.rocketmq.quickstart; import java.util.List; import org.apache.rocketmq.client.excep ...