方法1:

<div class="footer">
</div>

.footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  _position:absolute;
  _top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
  overflow:visible;
}

方法2:

CSS Sticky Footer,出自:http://www.cssstickyfooter.com/using-sticky-footer-code.html

<div id="wrap">
  <div id="main">
  </div>
</div>
<div id="footer">
</div>

* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;padding-bottom: 180px;}
#footer {position: relative;margin-top: -180px;height: 180px;clear:both;}
/*Opera Fix*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;
}
<!--[if !IE 7]>
<style type="text/css">
  #wrap {display:table;height:100%}
</style>
<![endif]-->

此两种方法亦可用于顶部的导航。

固定导航(Sticky nav)的更多相关文章

  1. JS---封装getScroll函数 & 案例:固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

  2. 设置导航栏nav全透明

    设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...

  3. Bootstrap系列 -- 43. 固定导航条

    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定 ...

  4. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  5. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. 滚动时sticky nav

    参考w3c <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  8. 固定导航栏(jquery)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

随机推荐

  1. shell实现两个数的相加

    刚开始的时候写,一直写不对:看似简单的功能,但是一定要小心:函数的定义: funciton functionName {.....}在functionName和{之间一定有空格啊! 我就是没加空格,就 ...

  2. 关于使用 pushViewController: animated: 方法在下一个控制器中拿不到值的解决方法

    如下代码: // 加载一个tabbar控制器 houseMessageTabbarController *houseTabbar = [[houseMessageTabbarController al ...

  3. 【poj1985】 Cow Marathon

    http://poj.org/problem?id=1985 (题目链接) 题意 求树上两点间最长距离.题目背景以及输入描述请见poj1984. Solution 树的直径. 代码 // poj198 ...

  4. 【poj1733】 Parity game

    http://poj.org/problem?id=1733 (题目链接) 题意 一个由0,1组成的序列,每次给出一段区间的奇偶,问哪一条信息不合法. Solution 并查集. 题目中序列的长度有很 ...

  5. BZOJ1912 [Apio2010]patrol 巡逻

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  6. MVC3项目依赖文件错误解决

    MVC3的项目依赖分为两大类: 1.ASP.NET Web Pages 2.ASP.NET MVC 3 如果没有正确引入,或者项目的版本有错误会出现程序集引用错误. 在服务器上部署时,解决思路如下: ...

  7. 偶然发现的Unity3d,两点之间的距离计算。

    无意间查了一下Vector3的API,发现了一个方法. magnitude  Returen the length of vector(Read Only). 然后就试了一下这个方法. Vector3 ...

  8. CentOS下X Window与命令行界面的切换

    [Ctrl] + [Alt] + F1~F6:文字界面登陆tt1~tty6 [Ctrl] + [Alt] + F7:图形界面桌面 从文字界面启动图形界面的命令:startx

  9. 为什么要用Markdown写东西

    为什么要用Markdown 不用费心去调格式了,比方说题目加粗什么的,删除线什么的,代码也只要四个空格就好了~ 学起来很简单,几乎没什么学习成本,而收益却很大 这几乎快让我我想从cnblog转到简书了 ...

  10. JSP+JavaBean+Servlet实现各类列表分页功能

    需求: 每页列表下都有一个分页的功能,显示总数量.当前页/总页数.首页.上一页.下一页.最后一页.GO到第几页 效果动态图: 实现思路: 因为每个列表页都需要,在每个出列表页数据的servlet中都要 ...