DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部
有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0 ,Opera 8.5 ,Firefox 1.5 。下面我们看步骤:
1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding。经测试,html和body的 height: 100%; 等于整个浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。是不是有点不好理解?
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- height: 100%;
- }
2、因为上面提到的问题,所以为了让布局自适应高度,我们要加上 min-height: 100%;,虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用:
- #wrapper {
- min-height: 100%;
- }
- * html #wrapper {
- height: 100%;
- }
这样,一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看,我加了一些宽度和背景色修饰,如下:
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- height: 100%;
- text-align: center;
- font: 12px/1.4 Verdana, sans-serif;
- background: #f00;
- }
- #wrapper {
- width: 770px;
- min-height: 100%;
- background: #ccc;
- margin: auto;
- text-align: left;
- }
- * html #wrapper {
- height: 100%;
- }
下面看完整代码的运行效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><br />
<html xmlns="http://www.w3.org/1999/xhtml"> <br /><br />
<head> <br /><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><br />
<title>DIV+CSS:页脚永远保持在页面底部 _ 海波吧 _ www.haibor8.cn </title> <br /><br />
<style type="text/css"> <br /><br />
/*<![CDATA[*/ <br /><br />
* { <br /><br />margin: 0; <br /><br />padding: 0; <br /><br />
} <br /><br />
html, body { <br /><br />height: 100%; <br /><br />text-align: center; <br /><br />font: 12px/1.4 Verdana, sans-serif; <br /><br />background: #F00; <br /><br />
} <br /><br />
#wrapper { <br /><br />width: 770px; <br /><br />min-height: 100%; <br /><br />background: #ccc; <br /><br />margin: auto; <br /><br />text-align: left; <br /><br />
} <br /><br />
* html #wrapper { <br /><br />height: 100%; <br /><br />
} <br /><br />
#header { <br /><br />background: Green; <br /><br />height: 40px; <br /><br />
} <br /><br />
#sidebar { <br /><br />float: left; <br /><br />width: 200px; <br /><br />background: Gray; <br /><br />
} <br /><br />
#content-box { <br /><br />float: right; <br /><br />width: 570px; <br /><br />background: Olive; <br /><br />
} <br /><br />
#footer { <br /><br />height: 50px; <br /><br />background: Background; <br /><br />width:770px; <br /><br />margin: auto; <br /><br />
} <br /><br />
/*]]>*/ <br /><br />
</style> <br /><br />
</head> <br /><br />
<br /><br />
<body> <br /><br />
<div id="wrapper"> <br /><br /><div id="header">此处显示 "header" 的内容</div> <br /><br /><div id="content-box">此处显示 "content-box" 的内容</div> <br /><br /><div id="sidebar">此处显示 i"sidebar" 的内容</div> <br /><br />
</div> <br /><br />
<div id="footer">此处显示 "footer" 的内容</div> <br /><br />
</body> <br /><br />
</html>
DIV+CSS:页脚永远保持在页面底部相关推荐
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- JS实现让页脚一直固定在页面底部
2019独角兽企业重金招聘Python工程师标准>>> JS实现页脚在浏览器可视范围内始终置底. 如下图所示: 代码如下: <!DOCTYPE html> <htm ...
- php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法 导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.下面就由百分网小编为大家介绍一下 ...
- CSS + DIV 让页脚始终底部
原文:CSS + DIV 让页脚始终底部 一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部, ...
- html css页脚代码,HTML CSS - 页脚 - 下面的空格
我有问题试图让我的页脚"粘"到页面底部的所有内容下面.我尝试了许多不同的技术,但无法使其与标题一起工作.HTML CSS - 页脚 - 下面的空格 什么是最好的方式来布局我的布局来 ...
- css页脚怎么这只,纯css实现内容不足时页脚在底部
当页面的内容较少时,你会发现页脚并没有在页面的底部.那么如何在内容不足时让页面始终在底部呢?你可能会说用fixed定位,只要设置bottom:0就会在底部了,那么此时当页面内容增多出现滚动条的时候,页 ...
- 在html用div怎样写页脚,使用div+CSS将页脚始终控制在页面最下方的方法
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页中 ...
- css怎样给网页加页脚,在移动Web页面中使用CSS固定页脚
一种单页应用的页面结构 面向移动端的单页应用(Single Page Web Application),从页面代码上来说,会使用较一般网页不同的结构.单页应用并不是说应用只需要一个视图,而是说可以将组 ...
- html页脚位置调整,将页脚始终控制在页面最下方的几种方法
html和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页 ...
最新文章
- 计算机组成原理实验pc,计算机组成原理实验报告5- PC实验
- 革新Transformer!清华大学提出全新Autoformer骨干网络
- vim和NERD树扩展 - 添加文件
- spring应用实例
- 004-流程控制和类型转换
- Node.js mimimn图片批量下载爬虫 1.00
- verilog中assign和always@(*)的区别和易忽略的点
- 深入了解帆软报表系统的启动过程三
- 矩池云上安装yolov5并测试
- AntTweakBar with OpenGL
- [转载] python staticmethod有什么意义_Python 中的 classmethod 和 staticmethod 有什么具体用途
- 剑指offer、二叉搜索树的第K个结点(python)
- 中国城市统计年鉴中地级市面板数据(2000-2019年)
- ImportError: _C.cpython-36m-x86_64-linux-gnu.so: undefined symbol: _ZN2at4_ops6narrow4callERKNS_6Ten
- 北京大学 引进一位人工智能世界级专家!
- 动态规划——宠物小精灵之收服
- Hexo博客备份方案
- scrapy将爬取的数据存入mysql_scrapy爬取数据存入MySQL
- 软件测试是背锅,测试如何少背锅”
- Linux之必备软件安装(搜狗输入法、qq等)
热门文章
- 弹性地基梁板实用计算_建筑地基基础设计规范要点
- 宝塔Linux面板公司,宝塔面板_宝塔Linux面板-九州数码,一站式云安全服务平台
- 此计算机上的操作系统不符合 sql,windows7系统安装SQL server2012提示操作系统不符合最低要求怎么办...
- java8 stream 多个_java8 stream两个集体交集、差集、并集操作
- 支付宝花呗接口接入php,支付宝小程序开通花呗接口,这是正式向微信小程序正式宣战?...
- Cli4.5.x 中使用axios请求数据
- java 找序列最小值_【C++编程练习】任意给定 n 个有序整数,求这 n 个有序整数序列的最大值,中位数和最小值...
- java中多态案例工厂类,Java中构造器内部的多态方法的行为实例分析
- 软件部署在不同linux上,如何在Linux中安装和部署keepalived
- mysql cluster 数据文件_关于MYSQL CLUSTER数据文件存放节点错误问题 -问答-阿里云开发者社区-阿里云...