如何在其他三个div之间共享div的高度

Question

我在另一个div中有一个三个子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中共享，在您的中为33.3%

.divright{
    height:33.3%;
 }

Answer 2

假设您希望父div是窗口的高度，您可以在CSS中添加以下内容：

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