css-绝对定位能使高度不定的父DIV的子标签高度100%显示

经自己测试,绝对定位能使高度不定的父DIV的子标签高度100%显示,IE7+,firefox,chrome等浏览器均是如此,但是IE6却不鸟!

测试代码:

<title>绝对定位与高度100%显示</title>
<style type="text/css">
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;}
</style>

-------------------------------------------------我是分割线,哦也!-------------------------------------------------------

<body>
<div class="test_a">
<div class="abs_a">绝对定位</div>
</div>
<div class="test_b">
<img src="http://lh3.ggpht.com/_ZR4fYJ5mtLI/SjJ9Vkp6JWI/AAAAAAAAAB8/4HNXb3Fq53Y/s160/large_G50J_5130l206109.jpg" />
<div class="abs_b">绝对定位</div>
</div>
</body>

结果:

css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第1张图片
css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第2张图片
css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第3张图片

css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第4张图片

从实例可以看出:

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等在下面):

css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第5张图片
css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第6张图片

css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第7张图片

IE下,尤其IE6下绝对定位层更像是一个不守规矩的普通层一样,一个普通层与真正意义上的绝对定位层的杂交种,继承了很多普通层的特性,受限于父DIV宽度,无法实现height:100%(就像个普通层一样)。

想要解决这个问题,css估计力不足!

用js可以解决这一问题,

很简单的一句话:

<!--[if IE 6]>
<script type="text/javascript">
$(document).ready(function(){
   $(".abs_b").height($(".test_b").height());//chrome下高度获取为0,所以使用IECC使得仅针对IE6
});
</script>
<![endif]-->

结果IE6下:

css-绝对定位能使高度不定的父DIV的子标签高度100%显示_第8张图片

(完)

来自: http://hi.baidu.com/iamzhangxinxu/blog/item/e6eee835c1a6e6bed0a2d3bd.html

你可能感兴趣的:(浏览器,IE,chrome,Class,div,firefox)