如何分享其他三個div的div高度？

Question

我在另一個div中有三個div，我需要分享三個孩子之間的父div的高度。

HTML代碼：

<div class="frameright"> 
     <div class="divright"> 
      <table class="right" id="andamento"> 
       <caption style="text-align:left">Em Andamento()</caption> 
       <thead> 
        <tr> 
         <th>Chamado</th> 
         <th>Atividade</th> 
         <th>Titulo</th> 
         <th>Inicio</th> 
         <th>Hora</th> 
         <th>tempo</th> 
        </tr> 
       </thead>  
       <tbody> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="divright"> 
      <table class="right" id="aberto"> 
       <caption style="text-align:left">Aberto()</caption> 
       <thead> 
        <tr> 
         <th>Chamado</th> 
         <th>Atividade</th> 
         <th>Titulo</th> 
         <th>Abertura</th> 
         <th>Previsão</th> 
         <th>Dias</th> 
        </tr> 
       </thead>  
       <tbody> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="divright"> 
      <table class="right" id="encerrado"> 
       <caption style="text-align:left">Encerrado()</caption> 
       <thead> 
        <tr> 
         <th>Chamado</th> 
         <th>Atividade</th> 
         <th>Titulo</th> 
         <th>Inicio</th> 
         <th>Hora</th> 
         <th>Conclusão</th> 
         <th>Hora</th> 
         <th>Tempo</th> 
        </tr> 
       </thead>  
       <tbody> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 

而CSS：

html{margin:1px;} 
    body{font-size:70%;margin: 0px;} 
    p{font-size:medium;} 
    html,body{font-family:Verdana, Geneva, Tahoma, sans-serif;overflow:hidden;height:98%;} 

    table{border-spacing: 1px;} 
    table thead tr th{width:2%;background: #2F75B5;font-weight: normal;padding: 2px 3px;color:#FFFFD4;} 
    table tbody tr td{z-index:0;background-color:#DDEBF7;min-width:1%;} 

    table.right{margin: 5px 0 0 0;max-height: 33%;} 
    table.right tbody td:hover {background-color:#79B7E7} 
    table.right tbody tr:hover td{background-color: #79B7E7} 

    .blue{background-color: #79B7E7} 
    .red{background:#F08080;font-weight:normal;} 
    .green{background-color:#60CA8F;font-weight:normal;} 

    .number{text-align:right;} 

我要平等地分享這三個div元素之間的高度。任何人都可以幫助我？

Answer 1

首先給你的parent div一些高度像

.frameright{ 
     height: some_value; 
    } 

然後之間分享這一切你child divs作爲percentge是33.3%你的情況

.divright{ 
    height:33.3%; 
} 

Answer 2

假設你希望父的div是窗口的高度，您可以將以下內容添加到您的CSS：

.frameright{ height: 100%; } 
.divright{ height:33.3%; }