title: <div> height 100% isn't working in Chrome
body: <p>I'm having a problem, which already searched the internet but can not solve. I have an iframe, and inside I have a page that is loading the following CSS.</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>And the following HTML code</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;
      &lt;script language="JavaScript" type="text/javascript" src="/csp/broker/cspxmlhttp.js"&gt;&lt;/script&gt;
      &lt;script language="JavaScript" type="text/javascript" src="/csp/broker/cspbroker.js"&gt;&lt;/script&gt;
       &lt;script language="JavaScript" type="text/javascript" src="/csp/cratera/sys/function.js"&gt;&lt;/script&gt;&lt;script language="JavaScript"&gt;cspHttpServerMethod("KJnjcEnDVCs$h8WvTvpH0LQbuqWLNC_moK_PLd1scC8cNx6fZxqGz_mS6Q0_HRLRO2oUxExyIGwafKPhULXcfw--")&lt;/script&gt;
       &lt;link rel="stylesheet" type="text/css" href="/csp/cratera/themes/default/css/style.css"&gt;
      &lt;title&gt;Cadastro de Empresa&lt;/title&gt;
      &lt;script language="JavaScript"&gt;
  
          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"));
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="titulo"&gt;Cadastro de Empresa&lt;/div&gt;&lt;br&gt;&lt;hr size="1" style="margin:0px"&gt;
      &lt;div class="c1" style="text-align:right;"&gt;
              &lt;input id="btnCad1" name="btnCad1" onClick="Salvar();" type="button" value="Cadastrar"&gt;&lt;/input&gt; 
              &lt;input id="btnNov1" name="btnNov1" onClick="Novo();" type="button" value="Novo"&gt;&lt;/input&gt;    
              &lt;input id="btnCon1" name="btnCon1" onClick="Consultar();" type="button" value="Consultar"&gt;&lt;/input&gt;  
      &lt;/div&gt;
      &lt;br&gt;    
      &lt;span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);"&gt;Cadastro&lt;/span&gt;
      &lt;span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);"&gt;Entrega&lt;/span&gt;
      &lt;span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);"&gt;Cobrança&lt;/span&gt;
      &lt;br&gt;
      &lt;div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;"&gt;
          &lt;br&gt;
              &lt;form id="form"&gt;
              &lt;!-- ALL FORM CODE HERE --&gt;
              &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;"&gt;
          &lt;br&gt;
              Hello!
      &lt;/div&gt;
      &lt;div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;"&gt;
          &lt;br&gt;
              Hello!
      &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As can be seen in the settings tab (class = "abaA" and class = "abaF") I am not able to put the "height: 90%." It works in Mozilla and Internet Explorer, but in Chrome and Safari - both important to my project - it does not work. I have looked on the internet, and many people have this problem, and none of the solutions suggested worked for me.</p>
  
  <p>Appreciate any help.
  Thanks</p>