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. 【转】IOS获取屏窗高度踩坑之window.outerHeight

    近日本人在直接使用window.outerHeight获取屏窗高度时 在iphone 6中出现等于0的情况,从而导致页面发生错误 后找遍代码,测试无数,终于让我逮住了这个该死兼容 window.out ...

  2. 等差数列+随机数——cf1114E

    先确定上界 然后用查询随机位置的数,求gcd作为公差即可 /* 给定一个size为n的打乱的等差数列 两个询问 ? i 询问第i个数的值 > x 询问大于的值是否存在 可以在30次内问出最大值 ...

  3. 容斥原理——hdu2841

    记得要开ll /* 莫比乌斯反演模板题,也可以直接算phi来做 容斥的解法 求x[1..m],在[1,n]中和其互质的数的个数即可 那么就是n-和x不互质的数个数即可 */ #include<b ...

  4. 莫烦PyTorch学习笔记(五)——模型的存取

    import torch from torch.autograd import Variable import matplotlib.pyplot as plt torch.manual_seed() ...

  5. 基于SpringBoot的开源微信开发平台，Jeewx-Boot 1.0 版本发布

    项目介绍 JeewxBoot 是一款基于SpringBoot的免费微信开发平台.支持微信公众号.小程序官网.微信抽奖活动. Jeewx-Boot实现了微信公众号管理.小程序CMS.微信抽奖活动等基础功 ...

  6. <每日一题>题目10：求斐波拉契数列

    def func(x): m,n = 0,1 i = 0 while i < x: yield m m,n = n,m+n i += 1 fib = [] get_func = func(100 ...

  7. Ubuntu 16.04 安装STS

    先将STS下载下来,网址是 https://spring.io/tools/sts/all ,然后将STS压缩包移动或者copy到想要放置的位置,比如, sudo cp spring-tool-sui ...

  8. 使用 jQuery 设置 disabled 属性与移除 disabled 属性

    表单中readOnly和disabled的区别:Readonly只针对input(text/ password)和textarea有效,而disabled对于所有的表单元素都有效,包括select,r ...

  9. innodb状态

    Innodb_buffer_pool_pages_data Innodb buffer pool缓存池中包含数据的页的数目,包括脏页.单位是page. Innodb_buffer_pool_pages ...

  10. css3的2D变形

    一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...