如何在其他三個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中將其作為百分比共享，在您的情況下為33.3%

.divright{
    height:33.3%;
 }

Answer 2

假設您希望父div為窗口的高度，則可以在CSS中添加以下內容：

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