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. Python3基础笔记_迭代器

    # Python3 迭代器与生成器 import sys ''' 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开 ...

  2. LUOGU P1291 [SHOI2002]百事世界杯之旅 (期望dp)

    传送门 解题思路 期望$dp$.因为这个是期望步数,所以要倒着推.那么这道题就变得一脸可做了,设$f[i]$表示还有$i$张牌没有收集的期望,那么考虑再抽一张,有$(n-i)/n$的概率抽到抽过的牌, ...

  3. KNN算法和实现

    KNN要用到欧氏距离 KNN下面的缺点很容易使分类出错(比如下面黑色的点) 下面是KNN算法的三个例子demo, 第一个例子是根据算法原理实现 import matplotlib.pyplot as ...

  4. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  5. 杂项-DTO：DTO（数据传输对象）

    ylbtech-杂项-DTO:DTO(数据传输对象) 数据传输对象(DTO)(Data Transfer Object),是一种设计模式之间传输数据的软件应用系统.数据传输目标往往是数据访问对象从数据 ...

  6. 通过数据库中的表，使用 MyEclipse2017的反向生成工具-->hibernate反转引擎引擎(MyEclipse2017自带的插件) 来反转生成实体类和对应的映射文件

    通过数据库中的表,使用 MyEclipse2017的反向生成工具-->hibernate反转引擎引擎(MyEclipse2017自带的插件) 来反转生成实体类和对应的映射文件   文章目录 Ja ...

  7. jeecms v9库内新增对象的流程及其他技巧

    cms 开发 ———— 库内新增对象 Products 的流程说明及其他技巧 第一步:Entity com.jeecms.cms.entity.assist.base下建立模型基础类BaseCmsPr ...

  8. Redis系列一之《Redis设计与实践》整体观感

    笔者别的Redis方面的书没有读过,读完这一本,力荐,作者黄建宏,对Redis不太熟悉的,但是对编程稍微有些基础的,全部 读下来应该无压力.作者的编写和讲解非常详细,覆盖的面基本上都讲到,之前一直都是 ...

  9. LinkedList集合 实现栈和队列

    LinkedList集合的底层是链表结构实现的,所以可以模拟栈(先进后出)和队列(先进先出). 方法: addFirst() //添加元素到列表的起始位置 addLast() //添加元素到列表的结束 ...

  10. C#Image和Icon的相互转化

    Image img = Image.FromHbitmap(icon.ToBitmap().GetHbitmap()); Graphics g = Graphics.FromImage(img); g ...