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 ...
- Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- css让footer永远保持在页面底部
案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...
- CSS + DIV 让页脚始终底部
一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
- 将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
- 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS
原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
- html 设置页脚div一直在页面底部
先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...
随机推荐
- Apache Server 添加虚拟主机（Virtual Host ）
当前许多虚拟服务器如阿里云的ECS服务器,都提供各式各样的虚拟机,常见的有Linux.Windows等,如果我们使用了Apache Server作为虚拟机的Web服务器,并且我们希望多个web应用程序 ...
- 摘录ECMAScript官方文档中重要的两段话
Every object created by a constructor has an implicit reference (called the object’s prototype) to t ...
- 使用ping钥匙临时开启SSH:22端口，实现远程安全SSH登录管理就这么简单
设置防火墙策略时,关于SSH:22访问权限,我们常常会设置服务器只接受某个固定IP(如公司IP)访问,但是当我们出差或在家情况需要登录服务器怎么办呢? 常用两种解决方案:1.通过VPN操作登录主机: ...
- the server quit without updating pid file (/var/lib/mysql/localhost.localdomain.pid)
前几天装的mysql,用的还挺爽的,第二天再用就不行了,报的错误如标题.网上也是众说纷纭,可能有很多原因会导致这种错误吧.我用的是将Mysqld这个进程杀掉,就可以启动mysql了
- python爬虫——黑板客老师课程学习
程序: 目标url 内容提取 表现形式 为什么: 大数据——数据膨胀,信息太多了,不知道哪些信息适合你,例如谷歌搜索引擎. 垂直行业搜索——某一个行业的搜索,与搜索引擎最大的区别:搜索引擎是告诉你哪些 ...
- 调用SAP函数创建寄售退货订单的时候报错：业务对象 BUS2032 是销售订单，销售凭证类别 H 是退货。
RE.KR订单类型用BAPI_CUSTOMERRETURN_CREATE 其他用BAPI_SALESORDER_CREATEFROMDAT2
- Palindrome Pairs
Given a list of unique words. Find all pairs of distinct indices (i, j) in the given list, so that t ...
- XSS的原理分析与解剖（转）
(转)http://netsecurity.51cto.com/art/201408/448305_all.htm 0×01 前言: <xss攻击手法>一开始在互联网上资料并不多(都是现成 ...
- Centos 压缩、解压和打包命令
gzip命令 --功能说明:gz文件的压缩和解压缩. --命令格式:gzip [参数] <文件> --常用参数: -d 解开压缩文件 -l 列出压缩文件的相关信息 -q 不显示警告信息 - ...
- slim框架中防止crsf攻击时，用到的函数hash_equals
1．防止crsf攻击的最多解决方案就是 为每个请求生成一个唯一 token ,验证来源于客户端 HTML 表单产生的 POST等请求 ． 2．这个token默认放在session中． slim框架源码 ...