IE6 CSS高度height:100% 無效解決方法總結

本文轉載自查看原文 2013-02-05 15:47 7076 HTML+CSS

上面紅色部分為 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於iframe標簽height屬性設置100%無效解決方法 table和div設置height:100%無效的完美解決方法 vue中設置height:100%無效的問題及解決方法 IE6不支持min-height或max-width等完美解決方法 PNG兼容IE6解決方法 CSS中設置height:100%無效的解決方案 CSS0019：樣式中高度百分比無效時，這樣寫 height:calc(100%) 【CSS系列】height:100%設置div的高度 CSS高度自適應 height:100%; CSS高度自適應 height:100%;