<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. view 上推效果

    http://www.cocoachina.com/ios/20160307/15586.html

  2. Python语法基础(长期)

    os.mkdir和os.mkdirs的区别? 前者如果"中间路径"不存在,会抛出异常,后者则会自动创建中间路径. map(function, iterable) 对于可迭代函数`` ...

  3. oc UIAlertController封装

    #define SHOWALERT(MESSAGE) \ UIAlertController *alertController = [UIAlertController alertController ...

  4. maven中添加proguard来混淆代码

    只要下回插件并添加相应的配置文件即可.本文仅是做下相关记录 1.修改pom.xml添加插件 <plugin> <groupId>com.pyx4me</groupId&g ...

  5. pro asp.net mvc5 7

    一个类可以依靠IProductRepository这一接口获取Product对象,而不必知道这些对象从哪里来,也不必知道该接口的实现类如何递交这些对象,这就是存储库模式的本质

  6. iOS学习之Runtime(二)

    前面已经介绍了Runtime系统的概念.作用.部分技术点和应用场景,这篇将会继续学习Runtime的其他知识. 一.Runtime技术点之类/对象的关联对象 关联对象不是为类/对象添加属性或者成员变量 ...

  7. box-size

    <style> *{ margin:0; padding:0; list-style:none; font-family:"\5FAE\8F6F\96C5\9ED1"; ...

  8. C++线程安全的单例模式

    1.在GCC4.0之后的环境下: #include <iostream> using namespace std;template <typename T>class Sing ...

  9. MapReduce库类

    Hadoop除了可以让开发人员自行编写map函数和reduce函数,还提供一些常用函数(mapper.reducer和partitioner)的类库,这些类位于 org.apache.hadoop.m ...

  10. poi做Excel数据驱动,支持.xls和.xlsx格式的excel文档,比起jxl强大不少

    import java.io.FileInputStream;import java.io.InputStream;import java.util.Iterator;import java.util ...