1. 爱易网页
  2. CSS教程
  3. 最小高度100％页脚坚持在底部的规划方法

最小高度100％页脚坚持在底部的规划方法

日期：2013-10-17　 浏览次数：21091 次

有时候，我们用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%;}

3、加上页头页脚和内容部分，为了让 footer 在最下方，我们当然要把 footer“请出”wrapper 之外。当然，这样高度就超过一屏了，别急，后面有处理办法。

#header {background: Green;height: 40px;}#sidebar {float: left;width: 200px;background: Gray;}#content-box {float: right;width: 570px;background: Olive;}#footer {height: 50px;background: Background;width:770px;margin: auto;}