方法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. Linux网卡的相关配置总结

    当有多个网卡的时候,我们需要进行相关的配置. 一.如何改变网卡的名字? 修改/etc/udev/rules.d/70-persistent-net.rules 进去之后的效果是 根据mac地址,把没用 ...

  2. ubuntu安装pip3

    当初入门Linux 使用的是centos,那个时候是6.0版本,当然现在主流在使用的也是6.0系列的,现在都到6.7了,那个时候centos还是独立的,现在被redhat收购,本来一个红蓝就差不多,个 ...

  3. hadoop-hdfs分布式文件系统

    使用3台机器搭建hdfs完全分布式集群 201(NameNode),202(DataNode),203(DataNode) 整体架构 NameNode(192.168.1.201) DataNode( ...

  4. Eclipse中Jquery报错

    在网上看到很多 jQuery-xxx.js 在eclipse中报错的解决方案大多是说 项目右键 Properties->Validation->JSP Content Validator ...

  5. eclipse中项目右上方有一个s,eclipse中项目左下方友谊个红色的叉,eclipse中项目左下方友谊个红色的感叹号

    S,这个猜测使用了Spring tools 然后可以方便的建立xml配置文件,然后平时不用在意 红的叉,这个可能是tomcat没有的不合适,可以在properties里面的找到runtime然后改成合 ...

  6. POJ2001 Shortest Prefixes

    Description A prefix of a string is a substring starting at the beginning of the given string. The p ...

  7. TypeScript 素描 - 泛型、枚举

    /* 泛型,好处多多的功能.不过这里最基本的就不打算说了,仅准备说一些 和C#不同的地方 */ /* 泛型接口 GenericIdentityFn 定义了方法的描述等 identity方法则是它的实现 ...

  8. C++ 之 Direct and Copy Forms of Initialization

    Extraction from C++ Primer 5th. Editioin 3.2.1 C++ has several different forms of initialization, we ...

  9. Autofac的高级使用——Autofac.2.6.3.862

    Autofac的高级使用——Autofac.2.6.3.862 目录(?)[-] 使用代码方式进行组件注册依赖服务类和组件类 使用配置文件进行组件注册不需要依赖 定义配置文件 读取config配置文件 ...

  10. JSF dataTable 添加列 动态创建数据表 列

    @Named @ViewScoped public class LiveRangeService implements Serializable { private List< Map<S ...