1、把html和body的height属性设为100%;保证content的高度能撑满浏览器;

　　2、把#content的高度也设置为100% ，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。

　　3、将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准然后把#foooter设置为绝对定位，并使之贴在#main的最下端。

注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的文字了。

<style>
 body,html {

　　margin: 0;

　　padding: 0;

　　height:100%;

}

#content {

　　min-height:100%;

　　position: relative;

}

#main {

　　padding: 10px;

　　padding-bottom: 60px;

}

#footer {

　　position: absolute;

　　bottom: 0;

　　padding: 10px 0;

　　width: 100%;

}

#footer h1 {

　　font: 20px/2 Arial;

　　margin:0;

　　padding:0 10px;

}

</style>

<body>

　　<div id="content">
　　　　<div id="main">

　　　　　　<h1>main</h1>

　　　　　　<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>

　　　　　　<p>文字文字文字文字文字文字文字文字文字文字</p>

　　　　</div>

　　　　<div id="footer">

　　　　　　<h1>Footer</h1>

　　　　<div>

　　</div>

</body>

　　

让footer始终待在页面底部的更多相关文章

  1. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  2. css让footer永远保持在页面底部

    案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...

  3. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  4. footer始终在页面最底部的方法（问题待检验）

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  5. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  6. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  7. 让footer固定在页面底部（CSS-Sticky-Footer）

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

  8. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

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

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

随机推荐

  1. task code

    using System; using System.Collections.Generic; using System.Threading; using System.Threading.Tasks ...

  2. Java jmx的使用

    JMX Java Management Extensions,Java管理扩展.本质就是用来监控java语言开发的程序,一般常用于jconsole,java visual VM的监控,今天主要介绍ja ...

  3. 19-11-12-Aftern-℘

    我饿死了,于是写写博客安慰一下即将退役的自己. ZJ: T1. 三种颜色,想到一道神奇的‘天空龙’. 于是觉得此题可做. 那好了. 于是切掉,还拿了一个暴力对拍.疯狂A. 啊dfs慢的要死了 T2一眼 ...

  4. CLOSE_WAIT问题讨论

    1.https://cloud.tencent.com/developer/article/1347610 2.https://blog.huoding.com/2016/01/19/488 3.ht ...

  5. Spring中的Junit

    Spring中的Junit package com.imooc.test.base; import org.junit.After; import org.junit.Before; import o ...

  6. Docker这个新软件究竟是用来干嘛的？？？

    http://dockone.io/article/378 尝试新软件 对开发者而言,每天会催生出的各式各样的新技术都需要尝试,然而开发者却不太可能为他们一一搭建好环境并进行测试.时间非常宝贵,正是得 ...

  7. 7 Serialize and Deserialize Binary Tree 序列化及反序列化二叉树

    原题网址:http://www.lintcode.com/zh-cn/problem/serialize-and-deserialize-binary-tree/# 设计一个算法,并编写代码来序列化和 ...

  8. springboot整合aop实现网站访问日志记录

    目的: 统一日志输出格式,统计访问网站的ip. 思路: 1.针对不同的调用场景定义不同的注解,目前想的是接口层和服务层. 2.我设想的接口层和服务层的区别在于: (1)接口层可以打印客户端IP,而服务 ...

  9. 《数据结构与算法分析——C语言描述》ADT实现(NO.04) : AVL树（AVL-Tree）

    上次我们已经实现了普通的二叉查找树.利用二叉查找树,可以用O(logN)高度的树状结构存储和查找数据,提高了存储和查找的效率. 然而,考虑一种极端情形:依次插入1,2,3,4,5,6,7,8,9九个元 ...

  10. MyEclipse设置 web访问根路径

    使用鼠标右键点击项目(点击属性properties)进入如下图: