咱们用页面创立一个高度自适应规划,怎么确保页眉(footer)在内容不超过一屏的情况下一直保持在规划下方是一个对比头疼的事。我看过一些使用肯定定位的比如,但总感觉不是那么完美,通过一下午的研讨总结出一个使用负值外补丁的办法来完成这个效果的办法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+。下面咱们看过程:
1、为了让浏览器辨认高度极高比例咱们需求先给 html 和 body 加上一个高度值,一起清除一切元素的 margin 和 padding。趁便提一下,通过我的测验,html 和 body 的 height: 极高比例; 等于全部浏览器窗口的总高度,不管内容是不是超过一屏。而它们下一级子元素 height: 极高比例; 则等于先进屏的高度。怎么,是不是有点欠好理解?
* {margin: 0;padding: 0;}
html, body {height: 极高比例;}
2、由于上面提到的问题,所以为了让规划自适应高度,咱们要加上 min-height: 极高比例;,尽管IE不支持这个特点但是IE的 height: 极高比例; 有同样的效果:
#wrapper {min-height: 极高比例;}
* html #wrapper {height: 极高比例;}
这么,一个简单的小高度满一屏的自适应规划就做好了。为了便于检查,我加了一些宽度和背景色润饰,如下:
* {margin: 0;padding: 0;}
html, body {height: 极高比例;text-align: center;font: 12px/1.4 Verdana, sans-serif;background: #f00;}
#wrapper {width: 770px;min-height: 极高比例;background: #ccc;margin: auto;text-align: left;}
l html #wrapper {height: 极高比例;}