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. 爬虫——python——百度地图经纬度查询——经纬度查看地点地名——利用百度API获取地名经纬度——爬取所有的中国地址

    import requests address = '40.8587960,86.866991' url = 'http://api.map.baidu.com/geocoder?output=jso ...

  2. LUOGU P1967 货车运输(最大生成树+树剖+线段树)

    传送门 解题思路 货车所走的路径一定是最大生成树上的路径,所以先跑一个最大生成树,之后就是求一条路径上的最小值,用树剖+线段树,注意图可能不连通.将边权下放到点权上,但x,y路径上的lca的答案不能算 ...

  3. CobaltStrike进阶篇-批量上线

    前言 当获取一台目标服务器权限时,更多是想办法扩大战果,获取目标凭据并横向进行登陆是最快速的拿权方式.但目标所处环境是否可出网,如何利用CobalStrike进行批量上线,正是本文所要讲述的内容. 获 ...

  4. HOOK NtCreateSection

    本程序使用了hde32反汇编引擎,所以性能更加稳定! #pragma once #include <ntddk.h> NTSYSAPI NTSTATUS NTAPI NtCreateSec ...

  5. 【JEECG-Boot 技术文档】新手入门教程

    Jeecg-Boot入门教程必看(新手学习) 1.开发环境搭建 http://jeecg-boot.mydoc.io/?t=345670 开发工具 :https://pan.baidu.com/sha ...

  6. IT技术博客

    博客收藏大全: 陈皓博客: 陈硕的博客: 风云的博客: 当然我在扯淡: hellogirl: 田守枝Java技术博客: 廖雪峰博客: Milo游戏开发:

  7. JSON对象获取指定元素以及JSON.parse() 与 JSON.stringify() 的区别

    利用 JSON.parse(param) 实现 例: var param = { "name" : "张三", "text" : { &qu ...

  8. commons-httpclient和org.apache.httpcomponents的区别

    <dependency> <groupId>commons-httpclient</groupId> <artifactId>commons-httpc ...

  9. HBase 概念视图

  10. redis消息队列先进先出需要注意什么?

    通常使用一个list来实现队列操作,这样有一个小限制,所以的任务统一都是先进先出,如果想优先处理某个任务就不太好处理了,这就需要让队列有优先级的概念,我们就可以优先处理高级别的任务,实现方式有以下几种 ...