经自己测试,绝对定位能使高度不定的父DIV的子标签高度100%显示,IE7+,firefox,chrome等浏览器均是如此,但是IE6却不鸟!
测试代码:
绝对定位与高度100%显示body{font-size:84%;}
.test_a{width:30%; height:300px; border:1px solid #069; position:relative;}
.test_b{width:30%; border:1px solid #069; position:relative;}
.abs_a{position:absolute; width:150px; height:100%; top:0; bottom:0; background:#09C;}
.abs_b{position:absolute; width:150px; left:0; top:0; bottom:0; background:#09C;}
-------------------------------------------------我是分割线,哦也!-------------------------------------------------------
结果:
从实例可以看出:
1、如果父DIV高度固定,直接一个height:100%;就可以实现各个浏览器的高度100%显示(经自己测试,使用top:0; bottom:0;可以使IE6以外的浏览器高度100%显示);
2.当父标签高度不定时,则使用top:0; bottom:0;可以使IE6以外的浏览器高度100%显示(如果仅仅使用height:100%,也能实现IE6外的子标签高度100%的显示,但是位置有差别,本实例中,IE下是绝对定位层在图片后面,chrome,opera,firefox等在下面):
IE下,尤其IE6下绝对定位层更像是一个不守规矩的普通层一样,一个普通层与真正意义上的绝对定位层的杂交种,继承了很多普通层的特性,受限于父DIV宽度,无法实现height:100%(就像个普通层一样)。
想要解决这个问题,css估计力不足!
用js可以解决这一问题,
很简单的一句话:
结果IE6下:
(完)