页脚永远保持在页面底部

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

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

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

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

css 代码
  1. #wrapper {
  2. min-height: 100%;
  3. }
  4. * html #wrapper {
  5. height: 100%;
  6. }

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

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

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

<!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:页脚永远保持在页面底部的更多相关文章

  1. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  2. Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  3. css让footer永远保持在页面底部

    案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...

  4. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  5. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  6. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  7. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  8. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  9. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

随机推荐

  1. ADOConnectoin事务和存储过程中的Begin tran commit

    一直以来我都是在存储过程中使用事务 create proc usp_proc begin begin  tran ..... commit end 那么我现在问一个问题,如果在BCB的代码中写这样的代 ...

  2. web初学之重定向与请求转发

    重定向与请求转发的问题 (1)RequestDispatcher是通过调用HttpServletRequest对象的getRequestDispatcher()方法得到的,是属于请求对象的方法. (2 ...

  3. table 细边框

    table { border-collapse: collapse; border: none; width: 200px; } td { border: solid #000 1px; }

  4. js 中闭包的概念

  5. C# 模拟键盘操作--SendKey(),SendKeys()

    模拟键盘输入就是使用以下2个语法实现的.SendKeys.Send(string keys);  //模拟汉字(文本)输入SendKeys.SendWait(string keys); //模拟按键输 ...

  6. spring mvc 第三天【注解实现springmvc Handler返回值为Object 的配置】

    这里使用的是在前台发起请求Handler,后台伪造数据响应给前台, 解决方案:将之前的viewResolver抹掉,配置对应(request)请求的Handler信息如下 之前Handler返回的都直 ...

  7. .net core 安装失败 的问题彻底解决

    解决方法: 已经整理好包:   https://pan.baidu.com/s/1dFuU80p 下载解压运行: DotNetCore.1.0.1-VS2015Tools.Preview2.0.2.e ...

  8. CC1310之使用SMARTRF STUDIO

    SMARTRF STUDIO是TI提供的射频测试软件,在调射频的时候非常非常非常好用,推荐每一个使用TI射频芯片的工程师都要掌握. 1 如何使用? 要使用SMARTRF STUDIO,硬件必须连接仿真 ...

  9. POJ2553

    题意:很难懂!但是大体意思就是求有向图中从一个节点出发到达的点也能反向到达该节点的点.如a能到{b1,b2.....bx}这些点,而这些点也能到a,则a为要求的点.题目是求出所有的这种点. 对图进行缩 ...

  10. [转]Oracle 经验集

    -- 转换字符串为日期格式 to_date('2011-12-30 11:54:30','yyyy-MM-dd:hh24:mi:ss') Oracel 用 C# 连接,Microsoft 自带的 Sy ...