关于height:100%的简单理解

要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。

而这里要讲的是关于body和html的高度百分比显示的。

默认状态下，不是高度100%显示的，不要看定义background属性好像就是满屏显示的，此背景已非之背景。用下面这个一测便知。

body{background:#039; border:50px solid #C00;}
           

那么是否支持height:100%呢？经过我的测试，IE6支持，Firefox浏览器不支持。

要想让Firefox浏览器也支持的height:100%是简单的，就是设置标签height:100%，一旦设置了height:100%则无论哪个浏览器下都支持height:100%了，而内部的容器也可以支持height:100%了。

前段时间看到百度的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对和标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个

高度100%显示，溢出滚动。而这个透明层就使用绝对定位且与这个 平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。