页脚永远保持在页面底部

有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0 ，Opera 8.5 ，Firefox 1.5 。下面我们看步骤：

1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。经测试，html和body的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。是不是有点不好理解？

css 代码


  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. html, body {
  7. height: 100%;
  8. }


2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：

css 代码


  2. #wrapper {
  3. min-height: 100%;
  4. }
  5. * html #wrapper {
  6. height: 100%;
  7. }


这样，一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看，我加了一些宽度和背景色修饰，如下：

css 代码


  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. html, body {
  7. height: 100%;
  8. text-align: center;
  9. font: 12px/1.4 Verdana, sans-serif;
  10. background: #f00;
  11. }
  12. #wrapper {
  13. width: 770px;
  14. min-height: 100%;
  15. background: #ccc;
  16. margin: auto;
  17. text-align: left;
  18. }
  19. * html #wrapper {
  20. height: 100%;
  21. }


下面看完整代码的运行效果：


<!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>