IE6 CSS高度height:100% 无效解决方法总结

最新推荐文章于 2019-07-30 18:15:29 发布

weixin_34310127

最新推荐文章于 2019-07-30 18:15:29 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html

版权

上面红色部分为 height:100%; 自动拉伸到与父元素一样的高度。
在IE7 8 FF 等浏览器中通过position:absolute;可以使height:100%;正常显示，IE6下无效。
方法一：
使用CSS嵌入JS来实现。

_height:expression(document.getElementById('div2').offsetHeight+"px");

这句CSS只针对IE6有效。
测试:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
#box{
    position:relative;
    border:1px solid #CCC;
    width:180px;
}

#div1{
    position:absolute;top:0;right:0;
    width:100px;
    border-left:1px solid #CCC;
    background:red;
    float:right;
    height:100%;
    _height:expression(document.getElementById('div2').offsetHeight+"px");
}
</style>
</head>
<body>

<div id="box">
    <div id="div1"></div>
    <div id="div2">
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
    </div>
</div>

</body>
</html>

方法二：
去掉HTML第一行的<!doctype> 声明，并且给父容器指定height属性。
测试:

<!--<!doctype html> 删掉这句-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
#box{
    position:relative;
    border:1px solid #CCC;
    width:180px;
    height:150px;/* 给父元素指定height值 */
}

#div1{
    position:absolute;top:0;right:0;
    width:100px;
    border-left:1px solid #CCC;
    background:red;
    float:right;
    height:100%;
    /*_height:expression(document.getElementById('div2').offsetHeight+"px");*/
}
</style>
</head>
<body>

<div id="box">
    <div id="div1"></div>
    <div id="div2">
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
    </div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html

weixin_34310127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6 CSS高度height:100% 无效解决方法总结

上面红色部分为 height:100%; 自动拉伸到与父元素一样的高度。在IE7 8 FF 等浏览器中通过position:absolute;可以使height:100%;正常显示，IE6下无效。方法一：使用CSS嵌入JS来实现。_height:expression(document.getElementById('div2').offsetHeight+"p...
复制链接

扫一扫