<style type="text/css">
  #wapper{
position: relative; /*重要!保证footer是相对于wapper位置绝对*/
height: auto;
min-height: 100%;
}
  #main-content{
background:grey;
padding-bottom: 60px; /*重要!给footer预留的空间*/
}
  #footer{
    background: green;
    width: 100%;
    position: absolute;
    bottom:; /* 关键 */
    height:60px; /* 此方法的缺点:页脚的高度需要手动调 */
  }
</style>

<body style="margin:0">
<div id="wapper">
<!-- 主要内容 -->
<div id="main-content">
这里是内容
</div>
<!-- 页脚 -->
<div id="footer">
这里是页脚
</div>
</div>
</body>

 

Footer固定在页面底部(CSS)的更多相关文章

  1. 让footer固定在页面底部(CSS-Sticky-Footer)

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  2. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  3. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  4. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  5. 在不适用fixed的前提下,当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  6. 让footer固定在页面(视口)底部(CSS-Sticky-Footer)

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  7. 页面元素固定在页面底部的纯css代码(兼容IE6)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  9. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

随机推荐

  1. Java线程池使用

    1.构造函数 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, TimeUnit ...

  2. double hashing 双重哈希

    二度哈希(rehashing / double hashing) 1.二度哈希的工作原理如下: 有一个包含多个哈希函数(H1……Hn)的集合.当我们要从哈希表中添加或获取元素时,首先使用哈希函数H1. ...

  3. Python 函数之路

    ---恢复内容开始--- python函数的定义 def add(): a = 1 b = 2 c == a + b print(c) 函数就是把一段实现某一个功能的代放进一个封装的方法名里,这个方法 ...

  4. OC 调用JS 代码 处理HTML5 实战

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; ...

  5. ThreadLocal 与 static 变量

    ThreadLocal是为解决多线程程序的并发问题而提出的,可以称之为线程局部变量.与一般的变量的区别在于,生命周期是在线程范围内的.static变量是的生命周期与类的使用周期相同,即只要类存在,那么 ...

  6. usaco 17.Jan 铜组T3

    上午在打usaco月赛的铜组题,T1T2是用来秒杀的,然而T3卡了一上午,下面给出题面: 题意大概就是输入一个N*N的矩阵,矩阵中元素只有0与1两种状态,每次操作以左上角的点为矩阵中某一矩阵的左上方顶 ...

  7. Hibernate5--课程笔记1

    Hibernate简介: Hibernate是一个开放源代码的ORM(对象关系映射)框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. Hib ...

  8. ubuntu 把终端信息输出到文本文件中的方法

    方法一:把终端中所有信息都写到文本文件中 在终端的命令行中输入以下命令: $   script   -f    output.txt 这样就会在当前目录下创建一个output.txt文件 接下来,在按 ...

  9. 理解Load Average做好压力测试

    http://www.blogjava.net/cenwenchu/archive/2008/06/30/211712.html CPU时间片 为了提高程序执行效率,大家在很多应用中都采用了多线程模式 ...

  10. 【转】cookie和session的区别

    原作者:施杨(施杨's Think out)出处:http://shiyangxt.cnblogs.com ************** 本文版权归原作者和博客园共有,欢迎转载,转载请保留该申明 ** ...