<div>高度100%在Chrome </div>中无效

时间:2010-09-27 12:19:17

标签: css webkit

我遇到了问题,已经在互联网上搜索但无法解决。我有一个iframe,在里面我有一个加载以下CSS的页面。

html, body {
position:relative;
height:100%;
} 

.c1{
    float:left;
    text-align:left;
    margin-top:1px;
    margin-bottom:1px;
    width:100%;
}

.c2{
    float:left;
    text-align:left;
    margin-top:1px;
    margin-bottom:1px;
    width:50%;
}

.cvalue{
    float:left;
    width:40%;
    padding-right:3px;
    text-align:right;
}

.titulo{
    DISPLAY: inline-block;
    padding-left:5%;
}

.abaA{
    display:inline-block;
    text-align:center;
    position:relative;
    margin-top:1px;
    width:100px;
    border:#000 solid 1px;
    border-bottom:0px;;
    background-color:#F9F9F9;
}

.abaA:hover {
    background-color: #F9F9F9;
    cursor: pointer;
}

.abaF{
    display:inline-block;
    text-align:center;
    position:relative;
    margin-top:1px;
    width:100px;
    border:#000 solid 1px;
    border-bottom:0px;
    background-color:#EEE;
}

.abaF:hover {
    background-color: #F9F9F9;
    cursor: pointer;
}

.areaA{
    float:left;
    position:relative;
    border:#000 solid 1px;
    border-top:0px;
    background-color:#F9F9F9;
}

.areaF {
    float:left;
    position:relative;
    border:#000 solid 1px;
    border-top:0px;
    display:none;
    background-color:#F9F9F9;
}

以下HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <script language="JavaScript" type="text/javascript" src="/csp/broker/cspxmlhttp.js"></script>
    <script language="JavaScript" type="text/javascript" src="/csp/broker/cspbroker.js"></script>
     <script language="JavaScript" type="text/javascript" src="/csp/cratera/sys/function.js"></script><script language="JavaScript">cspHttpServerMethod("KJnjcEnDVCs$h8WvTvpH0LQbuqWLNC_moK_PLd1scC8cNx6fZxqGz_mS6Q0_HRLRO2oUxExyIGwafKPhULXcfw--")</script>
     <link rel="stylesheet" type="text/css" href="/csp/cratera/themes/default/css/style.css">
    <title>Cadastro de Empresa</title>
    <script language="JavaScript">

        function Salvar(){
            $CR.Submit("xiHqkWth9sV+2005/P0B5LY6k4AfsjV4hbGb3cevM8A",$("form"));
        }

        function Consultar(){
            $CR.Submit("tD3yLZP6yievtRoRMZLtjvnyw4Udr3eWUQNev/osmtg",$("form"));
        }

        function Novo(){
            $CR.ClearAll($("form"));;
            $CR.Submit("4evrj0yE4oGqBy1wKeKE+RJP0R4192anMoOcSNx5gJE",$("form"));
        }

    </script>

</head>

<body>
    <div class="titulo">Cadastro de Empresa</div><br><hr size="1" style="margin:0px">
    <div class="c1" style="text-align:right;">
            <input id="btnCad1" name="btnCad1" onClick="Salvar();" type="button" value="Cadastrar"></input> 
            <input id="btnNov1" name="btnNov1" onClick="Novo();" type="button" value="Novo"></input>    
            <input id="btnCon1" name="btnCon1" onClick="Consultar();" type="button" value="Consultar"></input>  
    </div>
    <br>    
    <span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
    <span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
    <span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
    <br>
    <div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
        <br>
            <form id="form">
            <!-- ALL FORM CODE HERE -->
            </form>
    </div>
    <div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
        <br>
            Hello!
    </div>
    <div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
        <br>
            Hello!
    </div>  
</body>
</html>

从设置选项卡(class =“abaA”和class =“abaF”)中可以看出,我无法将“身高:90%”。它适用于Mozilla和Internet Explorer,但在Chrome和Safari中 - 对我的项目都很重要 - 它不起作用。我在互联网上看过,很多人都有这个问题,并没有一个解决方案对我有用。

感谢任何帮助。 感谢

1 个答案:

答案 0 :(得分:1)

之前有一个div

<div class="areaA" id="area.endereco.cad" ...

类似

<div>
    <br>    
    <span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
    <span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
    <span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
    <br>
</div>
<div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
    <br>
        <form id="form">
        <!-- ALL FORM CODE HERE -->
        </form>
</div>

会做到这一点。 顺便说一句,你应该检查你的代码,它远非有效。