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. Joomla - K2组件（文章管理扩展）

    一.下载 K2 进入 https://getk2.org/ ,点击DOWNLOAD K2 下载K2 下载完毕得到一个安装包 二.安装 K2 进入看后台,点击顶栏主菜单 扩展管理 -> 扩展安装 ...

  2. 菜鸟安装 CocoaPods

    在 iOS 项目开发中,经常会用到第三方的源代码,CocoaPods 就是为了方便管理这些源码的工具. 在官方教程里面,安装看起来非常简单 $ [sudo] gem install cocoapods ...

  3. java基础之二维数组-杨辉三角

    首先呢你要知道什么是杨辉三角? 答:杨辉三角,是二项式系数在三角形中的一种几何排列. 简单的说一下就是两个未知数和的幂次方运算后的系数问题,比如(x+y)的平方=x的平方+2xy+y的平方,这样系数就 ...

  4. python数据类型初始1

    int: 1,2,3就是用于计算. bool:主要是用于判断,True,False str:用引号引起来的,'dsldgau','张三'.主要用于储存少量数据,进行操作 list(列表):[1,2,3 ...

  5. C# 把十六进制表示的ASCII码转换为对应的字符组成的字符串

    0x30表示字符‘0’的ASCII码.

  6. 1.Spring【IOC】XML方式

    1.下载开发包 http://repo.springsource.org/libs-release-local/org/springframework/spring 2.创建WEB工程,引入jar包 ...

  7. 廖雪峰Java10加密与安全-4加密算法-2口令加密算法

    对称加密key是一个byte数组,如AES256算法的key是一个32字节的数组,普通的加密软件由用户输入加密口令.如果由用户输入口令,进行加密/解密,需要用到PBE算法. 1.PBE:Passwor ...

  8. MaxCompute用户初体验

    作为一名初次使用MaxCompute的用户,我体会颇深.MaxCompute 开箱即用,拥有集成化的操作界面,你不必关心集群搭建.配置和运维工作.仅需简单的点击鼠标,几步操作,就可以在MaxCompu ...

  9. 苹果系统 IOS 12 的H5 BUG ：键盘把页面顶上去了，底下留有一块空白区域

    苹果以往的系统是没问题的,一般情况下,点击input唤起键盘后是会自动显示到输入框的地方,然后收起键盘页面就会恢复到底部. 但是如果苹果是已经更新到最新的IOS12的话就会发生一个BUG ,就是键盘唤 ...

  10. Web交互增强

    刚刚google了一下这个概念,在其他的领域已经存在了这个概念,但是web方面还是没有被人提及的,所以我在这里第一次声明web方面的交互增强 交互增强 (interaction enhance) 相对 ...