青海龙8国际乐建设、网络推广最好的公司--您身边的龙8国际乐建设专家,马上拿起电话,联系我们:0971-8235355   
青海西宁龙8国际乐建设、龙8国际乐制作公司-西宁威势电子信息服务有限公司
 
西宁威势最新龙8国际乐制做案例展示
Lastest Project
 
当前位置为:首页 >> CSS知识 >> 正文  
龙8国际乐_龙8国际娱乐电脑版_龙8国际娱城手机版

文章来源: 西宁威势电子信息服务有限公司     发布时间:2010-8-3    浏览次数:8486    tags:DIV100%高度

经自己测试,绝对定位能使高度不定的父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>

结果:

从实例可以看出:

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可以解决这一问题,

很简单的一句话:

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

结果IE6下:

(完)


评论列表
正在加载评论……
  
评论   
呢  称:
验证码:
若看不清请点击更换!
内  容:
 
 
  在线洽谈咨询:
点击这里,在线洽谈   点击这里,在线洽谈   点击这里,在线洽谈
乘车路线    汇款方式   加盟合作  人才招聘
 
公司地址:青海省西宁市西关大街73号(三二四部队招行所四楼)     青ICP备13000578号-1 公安机关备案号:63010402000123    
QQ:147399120    mail:lostlove000@163.com    电话: 13897410341    邮编:810000
© Copyright( 2008-2009) QhWins.Com All Rights Reserved    版权所有:西宁威势电子信息服务有限公司 未经书面制授权,请勿随意转载!